Installing the Telerik and Kendo UI Themes

Installation of the Themes

You can set up a Telerik and Kendo UI theme in your project in either of the following ways:

With an AI coding agent — the fastest way to get started
Manually — NPM install + CDN, precompiled CSS, or SCSS source

Using AI Coding Agents

If you use an AI coding assistant like GitHub Copilot, Cursor, or Windsurf, you can install the kendo-themes skill to give your agent full context about the theme system — design tokens, available components, customization options, and Tailwind integration.

npx skills@latest add telerik/kendo-themes

Once installed, your AI agent understands how to:

Install and configure any Kendo UI theme in your project
Scaffold themed UI components with correct class names and structure
Customize design tokens (colors, spacing, typography, radii, elevation)
Integrate Kendo theme tokens with TailwindCSS
Troubleshoot styling issues using the official theme knowledge base

The skill works with any agent that supports Agent Skills — including GitHub Copilot, Codex, Cursor, and Claude Code.

Manual Installation

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

To install them, use the following commands:

# Meridian theme
npm install --save @progress/kendo-theme-meridian
# 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
# Default theme
npm install --save @progress/kendo-theme-default
# Classic theme
npm install --save @progress/kendo-theme-classic

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

By using a precompiled CSS file
By compiling the theme from the SCSS source files
By using an external (CDN) link

The exact placement of the theme's <link> tag and the overall CSS file order in the application can affect the ability to override styles from one CSS file with styles from another CSS file. If you need to override theme styles with custom CSS in the app stylesheet, then it's easier to place the app stylesheet after the Telerik and Kendo UI theme.

Using Precompiled CSS

Each Telerik and Kendo UI theme includes a precompiled CSS file that contains the styles for all UI components. Import it directly in your application:

import '@progress/kendo-theme-meridian/dist/all.css';

The precompiled CSS exposes all design tokens as CSS custom properties, so you can fully customize the theme at runtime without a build step:

:root {
    --kendo-color-primary: #ff6358;
}

Using the Build Process of the Application

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

// Use the entire theme
@use "@progress/kendo-theme-meridian/scss/all.scss" as *;

The scss/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 the scss/index.scss file, and include the styles for the components that you use in your application.

// Use the theme index
@use "@progress/kendo-theme-meridian/scss/index.scss" as *;

// Then include only Button and PanelBar styles
@include kendo-button--styles();
@include kendo-panelbar--styles();

Using External (CDN) Link

To reference a theme stylesheet that is hosted on the UNPKG CDN, add а <link> tag with the required URL to the head element of your page.

<!-- Meridian theme -->
<link href="https://unpkg.com/@progress/kendo-theme-meridian@14.1.0/dist/meridian-main.css" rel="stylesheet" />

<!-- Bootstrap theme -->
<link href="https://unpkg.com/@progress/kendo-theme-bootstrap@14.1.0/dist/bootstrap-main.css" rel="stylesheet" />

<!-- Material theme -->
<link href="https://unpkg.com/@progress/kendo-theme-material@14.1.0/dist/material-main.css" rel="stylesheet" />

<!-- Fluent theme -->
<link href="https://unpkg.com/@progress/kendo-theme-fluent@14.1.0/dist/fluent-main.css" rel="stylesheet" />

<!-- Default theme -->
<link href="https://unpkg.com/@progress/kendo-theme-default@14.1.0/dist/default-main.css" rel="stylesheet" />

<!-- Classic theme -->
<link href="https://unpkg.com/@progress/kendo-theme-classic@14.1.0/dist/classic-main.css" rel="stylesheet" />

In the above URLs, @x.x.x specifies the theme version and main is the swatch name.

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: