New to Telerik UI for Blazor? Download free 30-day trial

Swatch Distribution

Telerik UI for Blazor distributes the most commonly used swatches. While it is possiblle to get them from the Themes CDN, the Sass Theme Builder or the kendo-themes repository, this article lists a couple other ways of distribution.

In this article:

Distributed Swatches

The following swatches are statistically most used, so we've included them in our live demos to allow easy testing. In addition, we are also distributing them via several resources.

Telerik UI for Blazor distributed swatches:

Default Bootstrap Material Fluent
Main Main Main Main
Main Dark Main Dark Arctic
Ocean Blue Nordic Nova
Nordic Urban Lime Dark
Purple Vintage Main Dark
Turquoise

Distribution Options

The above listed swatches are distributed in several ways:

Telerik Blazor CDN

A dedicated Telerik UI for Blazor CDN hosts them in the swatches folder of the corresponding base theme. Below you will find a list of the distributed swatches and their CDN URLs.

The CDN URLs contain the Telerik UI for Blazor version. Thus, you do not need to manually track the theme compatibility. Just make sure to use your UI for Blazor version in the URL.

Default

Swatch CDN
Main https://blazor.cdn.telerik.com/blazor/3.6.0/kendo-theme-default/swatches/default-main.css
Main Dark https://blazor.cdn.telerik.com/blazor/3.6.0/kendo-theme-default/swatches/default-main-dark.css
Ocean Blue https://blazor.cdn.telerik.com/blazor/3.6.0/kendo-theme-default/swatches/default-ocean-blue.css
Nordic https://blazor.cdn.telerik.com/blazor/3.6.0/kendo-theme-default/swatches/default-nordic.css
Purple https://blazor.cdn.telerik.com/blazor/3.6.0/kendo-theme-default/swatches/default-purple.css
Turquoise https://blazor.cdn.telerik.com/blazor/3.6.0/kendo-theme-default/swatches/default-turquoise.css

Bootstrap

Swatch CDN
Main https://blazor.cdn.telerik.com/blazor/3.6.0/kendo-theme-bootstrap/swatches/bootstrap-main.css
Main Dark https://blazor.cdn.telerik.com/blazor/3.6.0/kendo-theme-bootstrap/swatches/bootstrap-main-dark.css
Nordic https://blazor.cdn.telerik.com/blazor/3.6.0/kendo-theme-bootstrap/swatches/bootstrap-nordic.css
Urban https://blazor.cdn.telerik.com/blazor/3.6.0/kendo-theme-bootstrap/swatches/bootstrap-urban.css
Vintage https://blazor.cdn.telerik.com/blazor/3.6.0/kendo-theme-bootstrap/swatches/bootstrap-vintage.css

Material

Swatch CDN
Main https://blazor.cdn.telerik.com/blazor/3.6.0/kendo-theme-material/swatches/material-main.css
Arctic https://blazor.cdn.telerik.com/blazor/3.6.0/kendo-theme-material/swatches/material-arctic.css
Nova https://blazor.cdn.telerik.com/blazor/3.6.0/kendo-theme-material/swatches/material-nova.css
Lime Dark https://blazor.cdn.telerik.com/blazor/3.6.0/kendo-theme-material/swatches/material-lime-dark.css
Main Dark https://blazor.cdn.telerik.com/blazor/3.6.0/kendo-theme-material/swatches/material-main-dark.css

Fluent

Swatch CDN
Main https://blazor.cdn.telerik.com/blazor/3.6.0/kendo-theme-fluent/swatches/fluent-main.css

ZIP archive

One of the ways to install Telerik UI for Blazor is to use the ZIP Archive. Its styles folder contains all the above swatches. You can download it from your Telerik account. Here is more information about the ZIP Archive...

Visual Studio and Visual Studio Code Wizards

The Create New Project wizards for Visual Studio and Visual Studio Code allow you to select the desired theme/swatch for your application. The wizards provide the above list of common swatches.

Once you've created the project, the selected theme will be saved locally in the wwwroot/lib/blazor-ui/styles folder of the application. With this configuration, upgrading UI for Blazor requires you to replace this CSS file manually.

In this article