Using the Exported Package

This article explains how to use the ZIP file that you export from ThemeBuilder.

ThemeBuilder enables application developers to apply the styles to the Telerik and Kendo UI components by using a generated ZIP package that contains Sass, CSS, custom components, and custom font files.

Exporting

When you are ready with the customization of the UI components, you can export a ZIP file that contains the generated customization styles and assets:

Navigate to the ThemeBuilder dashboard and open the desired project.
In the top right corner, select Export All and save the ZIP file.

Exporting the Selected Components

If you need a limited number of UI components, you can use the Export Selected option in the upper right corner. This option allows you to export the styles only for the components visible on the project's Live Preview screen.

Navigate to the ThemeBuilder dashboard and open the desired project.
In the top right corner, select the arrow icon next to the Export All button to show all export options.
Click on the Export Selected option and save the ZIP file.

The Export Selected option is available for the following versions and themes:

2022 R3: Default, Material

2023 R2 and later: Default, Material, Bootstrap, Classic

Using The ZIP Package

The exported ZIP package contains the Sass, CSS, custom components, and custom font files from your ThemeBuilder project. These assets are in a folder named after your ThemeBuilder project.

Custom font files are available only if you have added them to your project.

How to use these styles depends on your UI components library:

UI Components Library	Recommended Approach
Kendo UI for Angular	Use the ThemeBuilder Output as an NPM Package.
Telerik UI for Blazor	Use the Compiled CSS ThemeBuilder Output.
KendoReact	Use the ThemeBuilder Output as an NPM Package.
Kendo UI for jQuery	Use the ThemeBuilder Output as an NPM Package. Aletrnatively, you can also Use the Compiled CSS ThemeBuilder Output.
Kendo UI for Vue	Use the Compiled CSS ThemeBuilder Output.
Telerik UI for ASP.NET Core	Use the Compiled CSS ThemeBuilder Output.
Telerik UI for ASP.NET MVC	Use the Compiled CSS ThemeBuilder Output.
Telerik UI for PHP	Use the Compiled CSS ThemeBuilder Output.
Telerik UI for JSP	Use the Compiled CSS ThemeBuilder Output.

Using the ThemeBuilder Output as an NPM Package

This approach applies to the Angular, jQuery, React, and Vue frameworks.

To apply your custom styles to the UI components in your application, you can use the NPM package generated by ThemeBuilder like any other NPM package:

Copy the ThemeBuilder package to your application.
Extract the ZIP archive.
Navigate to the folder named after your ThemeBuilder project, and then install the NPM modules.
```
cd my-themebuilder-project-name

npm install
```
Add the ThemeBuilder package into your application's package.json file.
```
  "dependencies": {
    ...
    "my-themebuilder-project-name": "file:./my-themebuilder-project-name"
  },
```
The file:./my-themebuilder-project-name value is the relative path to the folder where you extracted the ThemeBuilder output package. For example, if you put it next to your application folder, the value will be file:../my-themebuilder-project-name.
Import the theme package into your application's index.scss file.
- For projects with version 2024 Q3 and below
```
@import '~my-themebuilder-project-name/dist/scss';
```
- For projects with version 2024 Q4 and above
```
@use 'my-themebuilder-project-name/dist/scss' as *;
```
Since the generated package already contains a reference to the Kendo theme, you do not need to manually add it to your project.
Install the ThemeBuilder package in your project.
```
cd ..
npm install
```

Using the Compiled CSS ThemeBuilder Output

This approach applies to the Blazor, jQuery, ASP.NET Core, ASP.NET MVC, PHP, and JSP frameworks.

To style the Telerik and Kendo UI components, you can use the compiled CSS that is included in the ZIP file exported from ThemeBuilder

Extract the ZIP archive.
Navigate to the my-themebuilder-project-name/dist/css folder.
Copy the ready to use pre-built CSS file named my-themebuilder-project-name.css.
- If you use custom fonts or Kendo Font Icons in your project, always copy the content of the my-themebuilder-project-name/dist/fonts folder into your application to the same directory level where you have copied the my-themebuilder-project-name/dist/css folder.
- The Kendo Font Icons font file is included in the ThemeBuilder output only if your project uses font icons instead of SVG icons.
- Starting with the R3 2023 release, the font icons font file is no longer bundled in the Telerik and Kendo UI themes distribution. This is done as part of a series of improvements related to content security policy (CSP). You can continue using font icons in your project by loading the font and related styles separately through CDN or directly from the kendo-font-icons package.
Next, follow the framework-specific steps:

Telerik UI for Blazor

Paste the my-themebuilder-project-name.css file into your application, usually into the wwwroot folder. Under wwwroot, you can create another folder for the CSS file, for example, myCustomTelerikThemes.
If you use custom fonts or Kendo Font Icons font in your ThemeBuilder project, copy the my-themebuilder-project-name/dist/fonts folder and paste it one level higher relative to the my-themebuilder-project-name.css. Skip this step if your project doesn't use custom fonts.

Include the custom stylesheet file in the head tag of your index document (by default, wwwroot/index.html for WebAssembly apps and ~/Pages/_Host.cshtml for server-side Blazor apps). The document may look like this:

    <head>
        <!-- More content can be present here -->

        <link rel="stylesheet" href="myCustomTelerikThemes/my-themebuilder-project-name.css" />

        <!-- More content can be present here -->
    </head>

Make sure that the application does not include another referenced Telerik theme. If you use a built-in theme, remove its <link> element.

To use the ThemeBuilder Sass output in your application, you need the files in the dist/scss and dist/fonts folders. For the detailed steps on using the .scss files, refer to the Custom Themes article in the UI for Blazor docs.

Kendo UI for jQuery

Paste the my-themebuilder-project-name.css file into your application, usually into the styles folder. Under styles, you can create another folder for the CSS file, for example, myCustomTelerikThemes.
If you use custom fonts in your ThemeBuilder project, copy the my-themebuilder-project-name/dist/fonts folder and paste it one higher relative to the my-themebuilder-project-name.css. Skip this step if your project doesn't use custom fonts.

Include the custom stylesheet file in the head tag of your index document (by default, index.html). The document may look like this:

    <head>
        <!-- More content can be present here -->

        <link rel="stylesheet" href="myCustomTelerikThemes/my-themebuilder-project-name.css" />

        <!-- More content can be present here -->
    </head>

Make sure that the application does not include another referenced Kendo theme. If you use a built-in theme, remove its <link> element.

Telerik UI for ASP.NET Core

Paste the my-themebuilder-project-name.css file in your application, usually in the wwwroot folder. Under wwwroot, you can create another folder for the CSS file, for example, myCustomTelerikThemes.
If you use custom fonts in your ThemeBuilder project, copy the my-themebuilder-project-name/dist/fonts folder and paste it one level higher relative to the my-themebuilder-project-name.css. Skip this step if your project doesn't use custom fonts.

Include the custom stylesheet file in the head tag of your index document (by default, ~/Views/Shared_Layout.cshtml). The document may look like this:

<head>
    <!-- More content can be present here -->

    <link rel="stylesheet" href="myCustomTelerikThemes/my-themebuilder-project-name.css" />

    <!-- More content can be present here -->
</head>

Telerik UI for ASP.NET MVC

Paste the my-themebuilder-project-name.css file in your application, usually in the Content folder. Under Content, you can create another folder for the CSS file, for example, myCustomTelerikThemes.
If you use custom fonts in your ThemeBuilder project, copy the my-themebuilder-project-name/dist/fonts folder and paste it one level higher relative to the my-themebuilder-project-name.css. Skip this step if your project doesn't use custom fonts.

Include the custom stylesheet file in the head tag of your index document (by default ~/Views/Shared_Layout.cshtml). The document may look like this:

    <head>
        <!-- More content can be present here -->

        <link rel="stylesheet" href="myCustomTelerikThemes/my-themebuilder-project-name.css" />

        <!-- More content can be present here -->
    </head>

Telerik UI for PHP

Paste the my-themebuilder-project-name.css file in your application, usually in the content folder. Under content, you can create another folder for the CSS file, for example, myCustomTelerikThemes.
If you use custom fonts in your ThemeBuilder project, copy the my-themebuilder-project-name/dist/fonts folder and paste it one level higher relative to the my-themebuilder-project-name.css. Skip this step if your project doesn't use custom fonts.

Include the custom stylesheet file in the head tag of your index document (by default index.php). The document may look like this:

    <head>
        <!-- More content can be present here -->

        <link rel="stylesheet" href="myCustomTelerikThemes/my-themebuilder-project-name.css" />

        <!-- More content can be present here -->
    </head>

Telerik UI for JSP

Paste the my-themebuilder-project-name.css file in your application, usually in the src/main/webapp/resources folder. Under src/main/webapp/resources, you can create another folder for the CSS file, for example, myCustomTelerikThemes.
If you use custom fonts in your ThemeBuilder project, copy the my-themebuilder-project-name/dist/fonts folder and paste it one level higher relative to the my-themebuilder-project-name.css. Skip this step if your project doesn't use custom fonts.

Include the custom stylesheet file in the head tag of your index document (by default views/index.jsp). The document may look like this:

    <head>
        <!-- More content can be present here -->

        <link rel="stylesheet" href="myCustomTelerikThemes/my-themebuilder-project-name.css" />

        <!-- More content can be present here -->
    </head>

Make sure that the application does not include another referenced Kendo theme. If you use a built-in theme, remove its <link> element.

Using the Custom Components Output

If you create and style your own custom components in ThemeBuilder, the exported ZIP package contains all assets required to use these components and their styles in your application:

Custom components' HTML—The HTML of the exported custom components is provided in separate files for each component. Use these HTML files to build technology-specific components in your application, leveraging composition and reusability.

Note that the HTML structure of a composite custom component doesn't contain the complete HTML code of the reused components. Instead, the place of the reused component is marked with a placeholder comment showing how to compose the custom component in your application. For example, if a Form component reuses a Button component, the exported HTML of the Form contains a  comment instead of the HTML code of the Button.
Custom components' styles—The exported Sass and compiled CSS include your custom components' style customizations.

Using the Exported Package

Exporting

Exporting the Selected Components

Using The ZIP Package

Using the ThemeBuilder Output as an NPM Package

Using the Compiled CSS ThemeBuilder Output

Telerik UI for Blazor

Kendo UI for jQuery

Telerik UI for ASP.NET Core

Telerik UI for ASP.NET MVC

Telerik UI for PHP

Telerik UI for JSP

Using the Custom Components Output

Getting Started

Community

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Getting Started

Community