# Using the Exported Package

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

[ThemeBuilder](https://www.telerik.com/themebuilder) enables application developers to apply the styles to the Telerik and Kendo UI components by using a generated [ZIP package](https://www.telerik.com/themebuilder/documentation/using-exported-styles/exported-package#using-this-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:

1. Navigate to the <a href="https://themebuilderapp.telerik.com/" target="_blank">ThemeBuilder dashboard</a> and open the desired project.
2. 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.

1. Navigate to the <a href="https://themebuilderapp.telerik.com/" target="_blank">ThemeBuilder dashboard</a> and open the desired project.
2. In the top right corner, select the arrow icon next to the **Export All** button to show all export options.
3. Click on the **Export Selected** option and save the ZIP file.

> The **Export Selected** option is available for the following versions and themes:
>
> * Q1 2024 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](https://www.telerik.com/themebuilder/documentation/using-exported-styles/exported-package#using-the-themebuilder-output-as-an-npm-package).                                                                                                                                                                                                               |
| Telerik UI for Blazor       | [Use the Compiled CSS ThemeBuilder Output](https://www.telerik.com/themebuilder/documentation/using-exported-styles/exported-package#using-the-compiled-css-themebuilder-output).                                                                                                                                                                                                                         |
| KendoReact                  | [Use the ThemeBuilder Output as an NPM Package](https://www.telerik.com/themebuilder/documentation/using-exported-styles/exported-package#using-the-themebuilder-output-as-an-npm-package).                                                                                                                                                                                                               |
| Kendo UI for jQuery         | [Use the ThemeBuilder Output as an NPM Package](https://www.telerik.com/themebuilder/documentation/using-exported-styles/exported-package#using-the-themebuilder-output-as-an-npm-package). Aletrnatively, you can also [Use the Compiled CSS ThemeBuilder Output](https://www.telerik.com/themebuilder/documentation/using-exported-styles/exported-package#using-the-compiled-css-themebuilder-output). |
| Kendo UI for Vue            | [Use the Compiled CSS ThemeBuilder Output](https://www.telerik.com/themebuilder/documentation/using-exported-styles/exported-package#using-the-compiled-css-themebuilder-output).                                                                                                                                                                                                                         |
| Telerik UI for ASP.NET Core | [Use the Compiled CSS ThemeBuilder Output](https://www.telerik.com/themebuilder/documentation/using-exported-styles/exported-package#using-the-compiled-css-themebuilder-output).                                                                                                                                                                                                                         |
| Telerik UI for ASP.NET MVC  | [Use the Compiled CSS ThemeBuilder Output](https://www.telerik.com/themebuilder/documentation/using-exported-styles/exported-package#using-the-compiled-css-themebuilder-output).                                                                                                                                                                                                                         |
| Telerik UI for PHP          | [Use the Compiled CSS ThemeBuilder Output](https://www.telerik.com/themebuilder/documentation/using-exported-styles/exported-package#using-the-compiled-css-themebuilder-output).                                                                                                                                                                                                                         |
| Telerik UI for JSP          | [Use the Compiled CSS ThemeBuilder Output](https://www.telerik.com/themebuilder/documentation/using-exported-styles/exported-package#using-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:

1. Copy the ThemeBuilder package to your application.

2. Extract the ZIP archive.

3. Navigate to the folder named after your ThemeBuilder project, and then install the NPM modules.

   ```shell
   cd my-themebuilder-project-name

   npm install
   ```

4. Add the ThemeBuilder package into your application's `package.json` file.

   ```js
     "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`.

5. Import the theme package into your application's `index.scss` file.

   * For projects with version 2024 Q3 and below

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

   * For projects with version 2024 Q4 and above

   ```js
   @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.

6. Install the ThemeBuilder package in your project.

   ```shell
   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

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`.

   > * If you use custom fonts or Kendo Font Icons in your project, always copy the content of the <code>my-themebuilder-project-name/dist/fonts</code> folder into your application to the same directory level where you have copied the <code>my-themebuilder-project-name/dist/css</code> 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](https://www.npmjs.com/package/@progress/kendo-font-icons) package.

4. Next, follow the framework-specific steps:

   * [Telerik UI for Blazor](https://www.telerik.com/themebuilder/documentation/using-exported-styles/exported-package#telerik-ui-for-blazor)
   * [Kendo UI for jQuery](https://www.telerik.com/themebuilder/documentation/using-exported-styles/exported-package#kendo-ui-for-jquery)
   * [Telerik UI for ASP.NET Core](https://www.telerik.com/themebuilder/documentation/using-exported-styles/exported-package#telerik-ui-for-aspnet-core)
   * [Telerik UI for ASP.NET MVC](https://www.telerik.com/themebuilder/documentation/using-exported-styles/exported-package#telerik-ui-for-aspnet-mvc)
   * [Telerik UI for PHP](https://www.telerik.com/themebuilder/documentation/using-exported-styles/exported-package#telerik-ui-for-php)
   * [Telerik UI for JSP](https://www.telerik.com/themebuilder/documentation/using-exported-styles/exported-package#telerik-ui-for-jsp)

### Telerik UI for Blazor

1. 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`.

2. 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.

3. 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:

   ```html
       <head>
           

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

           
       </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](https://docs.telerik.com/blazor-ui/styling-and-themes/custom-theme#using-the-build-process-of-the-application) article in the UI for Blazor docs.

### Kendo UI for jQuery

1. 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`.

2. 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.

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

   ```html
       <head>
           

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

           
       </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

1. 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`.

2. 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.

3. 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:

   ```html
   <head>
       

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

       
   </head>
   ```

### Telerik UI for ASP.NET MVC

1. 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`.

2. 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.

3. 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:

   ```html
       <head>
           

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

           
       </head>
   ```

### Telerik UI for PHP

1. 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`.

2. 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.

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

   ```html
       <head>
           

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

           
       </head>
   ```

### Telerik UI for JSP

1. 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`.

2. 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.

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

   ```html
       <head>
           

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

           
       </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](https://www.telerik.com/themebuilder/documentation/building-visual-styles/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.

## Related Articles

* [Using Custom Components](https://www.telerik.com/themebuilder/documentation/building-visual-styles/custom-components)
* [Building a Partial Theme](https://www.telerik.com/themebuilder/documentation/using-exported-styles/partial-theme-build)