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, and custom font files (only when added to the project).

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:

  1. Navigate to the ThemeBuilder dashboard and open the desired project.
  2. In the top right corner, select Export and save the zip file.

Using This Zip Package

This zip package contains the Sass, CSS, 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 component library:

Using the ThemeBuilder output in React, Angular, or Vue

The generated ThemeBuilder output is packaged as an npm package. To use it, copy the ThemeBuilder package to your application, and use it as a standard npm package:

  1. Extract the zip archive.

  2. Navigate to the folder named after your ThemeBuilder project, and then install the npm modules:

    cd my-themebuilder-project-name

npm install

  3. Add the ThemeBuilder package in 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.

  4. Import the theme package in your application's index.scss file:

    @import '~my-themebuilder-project-name/dist/scss';

    Since the generated package already contains a reference to the Kendo theme, you do not need to manually add it to your project.

  5. Install the ThemeBuilder package in your project:

    cd ..
npm install

Using the ThemeBuilder Output in Blazor

The generated ThemeBuilder output is packaged as an npm package. To use it, in a Blazor application:

  1. Extract the zip archive.

  2. Navigate to the my-themebuilder-project-name/dist/css folder.

  3. Copy the ready to use pre-built css file named my-themebuilder-project-name.css.

  4. Paste the my-themebuilder-project-name.css file in your application, usually in the wwwroot folder. For example, it can be in a folder called myCustomTelerikThemes.

  5. If you use custom fonts in your ThemeBuilder project, copy the <%- name -%>/dist/fonts folder and paste it one level up relative to the <%- name.toLowerCase() -%>.css. Skip this step if your project doesn't use custom fonts.

  6. 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 could 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 you do not have another Telerik theme that is referenced in the application. If you are using a built-in theme, you must 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.

In this article
Related articles
Not finding the help you need?