Using the Exported Package

This article explains how to use the zip file that you export from Unite UX.

Unite UX enables application developers to apply the styles from the design to the Kendo and Telerik UI components by using a generated zip package that contains Sass, CSS, fonts, and documentation.

Exporting

When you are ready with the customization of the UI components and they already match the design, you can export a zip file that contains files with Sass, CSS, and fonts:

Navigate to the Unite UX dashboard and open the desired project.
In the top right corner, select Export and save the zip file.

The following video demonstrates how to extract the zip file and explains its content.

Using this Zip Package

This zip package contains:

The Sass, CSS, and fonts governed by your Unite UX project. These assets are in a folder named after your Unite UX project.

How to use these styles depends on your UI component library:
Documentation on using the Unite UX zip package with KendoReact components. The documentation is in the form of a React application that uses the Storybook tool. To access the documentation, first install the documentation package.

Currently, the documentation is available only for the KendoReact components.

Using the Unite UX output in React, Angular, or Vue

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

Extract the zip archive.
Navigate to the folder named after your Unite UX project, and then install the npm modules:
```
cd my-unite-ux-project-name

npm install
```
Add the Unite UX package in your application's package.json file:
```
  "dependencies": {
    ...
    "my-unite-ux-project-name": "file:./my-unite-ux-project-name"
  },
```
The file:./my-unite-ux-project-name value is the relative path to the folder where you extracted the Unite UX output package. For example, if you put it next to your application folder, the value will be file:../my-unite-ux-project-name.
Import the theme package in your application's index.scss file:
```
@import '~my-unite-ux-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 Unite UX package in your project:
```
cd ..
npm install
```

Another way to use the Sass, CSS, and fonts available in the zip package is to configure the React project and install the Unite UX package as described in the bundled documentation.

The following video demonstrates how to use the Unite UX zip output in a React project.

Using the Unite UX Output in Blazor

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

Extract the zip archive.
Navigate to the my-unite-ux-project-name/dist/css folder.
Copy the ready to use pre-built css file named my-unite-ux-project-name.css.
Paste the my-unite-ux-project-name.css file in your application, usually in the wwwroot folder. For example, it can be in a folder called myCustomTelerikThemes.
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-unite-ux-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.

In case you want to use the Unite UX Sass output in your application, the Unite UX package contains all corresponding files in the dist/scss folder. For the detailed steps on using the .scss files, refer to the Custom Themes article in the UI for Blazor docs.

Using the Unite UX Output in jQuery

The generated Unite UX output is packaged as an npm package. To use it in a jQuery application:

Extract the zip archive.
Navigate to the my-unite-ux-project-name/dist/css folder.
Copy the ready to use pre-built css file named my-unite-ux-project-name.css.
Paste the my-unite-ux-project-name.css file in your application, for example, in the root kendoStyles folder.
Include the my-unite-ux-project-name.css file in the head tag of your HTML document.

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

    <link rel="stylesheet" href="kendoStyles/my-unite-ux-project-name.css" />

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

Make sure that you do not have another Kendo theme that is referenced in the application. If you are using a built-in theme, you must remove its <link> element.

Using the Unite UX Output in ASP.NET Core and MVC

The generated Unite UX output is packaged as an npm package. To use it in an ASP.NET Core or MVC application:

Extract the zip archive.
Navigate to the my-unite-ux-project-name/dist/css folder.
Copy the ready to use pre-built css file named my-unite-ux-project-name.css.
Paste the my-unite-ux-project-name.css file in the Content folder of your application.
Bundle the styles to render them or directly reference the styles in Layout.cshtml.

bundles.Add(new StyleBundle("~/Content/css").Include(
    "~/Content/my-unite-ux-project-name.cs.css");

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.

Installing the KendoReact Documentation

Currently, the documentation is available only for the KendoReact UI components.

To install and run the Storybook documentation:

Extract this zip archive.
Navigate to the documentation folder.
Run npm install.
Run npm run storybook:docs.

cd documentation
npm install
npm npm run storybook:docs

The npm run storybook:docs command will build and run the site with the bundled documentation. Follow the instructions on installing the Unite UX output package and the required KendoReact packages.

The documentation will help you to:

Get started with your React project.
Configure the project to use the design system styles.
Install the design system in your React project.
Install the KendoReact UI components in the React project.
See examples with the KendoReact UI components styled as required by the design system.

The following video demonstrates the documentation in Storybook, how to use it, and its key attributes.