Overview of the Fluent Theme
The Telerik and Kendo UI Fluent theme is a fully-customizable SCSS-based theme for the Telerik and Kendo UI components.
The theme implements the Microsoft Fluent UI look and feel. The Telerik and Kendo UI Fluent theme also introduces CSS variables so you can enjoy dynamically customizable variables. The theme uses the Segoe UI font family, but as the font itself is not included in the theme package, you can download it from Microsoft's web fonts.
To get the Telerik and Kendo UI Fluent theme, you can use the available npm package, CDN link, or GitHub repository.
Getting Started
The fastest way to apply the out-of-the-box Telerik and Kendo UI Fluent theme is to reference the theme stylesheets that are located on a CDN. Alternatively, you can install the theme as an npm package—this approach allows you to customize the theme.
Using the CDN Link
To use the Telerik and Kendo UI Fluent theme without customizing it, reference the precompiled CSS by adding the below CDN link into the head section of your application:
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/$THEME_VERSION/fluent/fluent-main.css" />
While using the precompiled CSS file is faster than compiling the theme from the source code, the approach has two drawbacks:
- The precompiled CSS file contains the CSS code for all components—even for components that you do not use in your application.
- Using the precompiled CSS file approach does not provide options for theme customization through SCSS variables because the theme is already compiled. To customize the theme, you must rebuild it by using the provided source code.
Installing the NPM Package
To install the Telerik and Kendo UI Fluent theme in your project, use the provided npm package. After installing it, you can edit and customize the stylesheets.
npm install --save @progress/kendo-theme-fluent
To use the theme in your application, import it into your project styles:
// Import the entire theme
@use "~@progress/kendo-theme-fluent/scss/all.scss";
You can also import only specific components:
// Import only Button and Autocomplete styles
@use "~@progress/kendo-theme-fluent/scss/index.scss" as kendo-theme;
@include kendo-theme.config(
$config: (
"components": (
"button",
"autocomplete"
)
)
);
@include kendo-theme.styles();
Using the Figma Kit
The Telerik and Kendo UI Fluent theme comes with a free UI kit for Figma that includes all Telerik and Kendo UI components. To learn more about the available UI kits and how to use them, see the Design Kits for Figma article.
Framework-Specific Documentation
For specific information about how to implement the Fluent theme in the context of the Telerik and Kendo UI libraries, refer to the official product documentation:
