---
title: Installation
path: themes/get-started/installation
position: 2
seo_title: Installing the Telerik and Kendo UI Themes
seo_description: Learn how to install the Telerik and Kendo UI themes and use
them in your application through AI coding agents, CDN links, precompiled CSS,
or the build process of the app.
---
## 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](#using-ai-coding-agents) — the fastest way to get started
* [Manually](#manual-installation) — 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.
```shell
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](https://agentskills.io/home) — 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:
```shell
# 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](#using-precompiled-css)
* [By compiling the theme from the SCSS source files](#using-the-build-process-of-the-application)
* [By using an external (CDN) link](#using-external-cdn-link)
The exact placement of the theme's `` 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](https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade). 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:
```js
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:
```css
: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.
```scss
// 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.
```scss
// 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 а `` tag with the required URL to the `head` element of your page.
```html
```
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:
