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:
- Navigate to the ThemeBuilder dashboard and open the desired project.
- 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 zip package with the React, Angular, or Vue UI component libraries.
- Using the zip package with the Blazor 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:
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 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 befile:../my-themebuilder-project-name
. -
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.
-
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:
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
.Paste the
my-themebuilder-project-name.css
file in your application, usually in thewwwroot
folder. For example, it can be in a folder calledmyCustomTelerikThemes
.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.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.