--- 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 CDN links, precompiled CSS, or the build process of the app. --- ## Installation of the Themes 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 an external (CDN) link](#using-external-cdn-link) * [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) 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 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. ### 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. ```sh node_modules/@progress/kendo-theme-meridian/dist/all.css ``` 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. ```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(); ``` ### 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: ![Kendo UI for Angular logo.](/images/angular-logo.svg) ![Telerik UI for Blazor logo.](/images/blazor-logo.svg) ![Kendo UI for jQuery logo.](/images/jquery-logo.svg) ![Kendo UI for React logo.](/images/react-logo.svg) ![Kendo UI for Vue logo.](/images/vue-logo.svg) ![Telerik UI for ASP.NET Core logo.](/images/core-logo.svg) ![Telerik UI for ASP.NET MVC logo.](/images/mvc-logo.svg)