Get Started

Quickly apply harmonious and consistent styles to the components in your app with the Telerik and Kendo UI themes.

Installation of the Themes

All Telerik and Kendo UI themes are available as NPM modules.

To install them, use the following commands:

# Default theme
npm install --save @progress/kendo-theme-default
# Bootstrap theme
npm install --save @progress/kendo-theme-bootstrap
# Material theme
npm install --save @progress/kendo-theme-material
# Fluent theme
npm install --save @progress/kendo-theme-fluent
# Classic theme
npm install --save @progress/kendo-theme-classic

You can include a theme in your project in either of the following ways:

Using External (CDN) Link

To reference a theme stylesheet that is hosted on the Telerik and Kendo server, add the CDN link in the head element of your page.

<!-- Default theme -->
<link rel="stylesheet" href="$THEME_VERSION/default/default-main.css" />

<!-- Bootstrap theme -->
<link rel="stylesheet" href="$THEME_VERSION/bootstrap/bootstrap-main.css" />

<!-- Material theme -->
<link rel="stylesheet" href="$THEME_VERSION/material/material-main.css" />

<!-- Fluent theme -->
<link rel="stylesheet" href="$THEME_VERSION/fluent/fluent-main.css" />

<!-- Classic theme -->
<link rel="stylesheet" href="$THEME_VERSION/classic/classic-main.css" />

Alternatively, you can use a link extracted from unpkg, for example:

<!-- Default theme -->
<link rel="stylesheet" href="" />

Using Precompiled CSS

Each Telerik and Kendo UI theme includes a precompiled dist/all.css CSS file that contains the styles for all UI components.


While using the precompiled CSS file is faster than compiling the theme from the source code, the approach has the following drawbacks:

  • It includes CSS for components that are not used in the application.
  • It does not provide options for theme customization through SCSS variables because the theme is already compiled.

Using the Build Process of the Application

You can include a Telerik and Kendo UI theme by importing the source SCSS file.

@import "@progress/kendo-theme-default/dist/all.scss";

The dist/all.scss file adds the styles for all components that are available in the theme. To trim down the size of the generated CSS, import only the source for the components that you use in your application. Each of them can be found in the scss/ folder.

// Import only the PanelBar and Grid styles by using Node Sass.
@import "@progress/kendo-theme-default/scss/panelbar/_index.scss";
@import "@progress/kendo-theme-default/scss/grid/_index.scss";

// Import only the PanelBar and Grid styles by using Dart Sass.
@import "@progress/kendo-theme-default/scss/panelbar/";
@import "@progress/kendo-theme-default/scss/grid/";

Framework-Specific Documentation

For specific information about the themes and their features in the context of the Telerik and Kendo UI libraries, refer to the official product documentation: