Built-in Themes

The UI for Blazor suite comes with a set of built-in themes that you can choose from to alter the visual appearance of the Telerik components:

  • Default - our own neutral styling that suits most cases.
  • Bootstrap - a theme that matches the Bootstrap styling. Read more in the Bootstrap Notes section.
  • Material - implements the Material Design Guidelines.

These themes are shared with the Kendo UI suites with which the UI for Blazor suite shares HTML rendering, classes and appearance (even though UI for Blazor are native Blazor components).

To use a theme, you must reference its stylesheet in the <head> of your main index file. For a client-side Blazor app, this is wwwroot/index.html and for a server-side Blazor app, it is ~/Pages/_Host.cshtml. The Razor syntax for a server application differs and you need to escape the @ symbols as @@.

This article contains the following sections:

Static Assets

Static assets are part of the NuGet package that the framework will copy to the output folder during build. They allow you to rely only on local resources for the app and do not need to be changed in the future.

Reference the Telerik theme from the static assets

<!DOCTYPE html>
<html>
<head>
    . . .
    <link rel="stylesheet" href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css" />

    <!-- Choose only one of the themes -->
    <!-- 
        <link href="_content/Telerik.UI.for.Blazor/css/kendo-theme-bootstrap/all.css" rel="stylesheet" />
        <link href="_content/Telerik.UI.for.Blazor/css/kendo-theme-material/all.css" rel="stylesheet" />
    -->

    <!-- For Trial licenses use one of the following -->
    <!--
        <link href="_content/Telerik.UI.for.Blazor.Trial/css/kendo-theme-default/all.css" rel="stylesheet" />
        <link href="_content/Telerik.UI.for.Blazor.Trial/css/kendo-theme-bootstrap/all.css" rel="stylesheet" />
        <link href="_content/Telerik.UI.for.Blazor.Trial/css/kendo-theme-material/all.css" rel="stylesheet" />
      -->
</head>

 . . .

</html>

CDN

You can reference the built-in Telerik assets from a cloud CDN instead of a local resource on your server.

Reference the Telerik assets from the cloud in a WebAssembly app

<!DOCTYPE html>
<html>
<head>
    . . .
    <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-default@latest/dist/all.css" />

    <!-- Choose only one of the themes -->
    <!-- 
        <link href="https://unpkg.com/@progress/kendo-theme-bootstrap@latest/dist/all.css" rel="stylesheet" />
        <link href="https://unpkg.com/@progress/kendo-theme-material@latest/dist/all.css" rel="stylesheet" />
    -->

    <script src="https://kendo.cdn.telerik.com/blazor/2.16.0/telerik-blazor.min.js" defer></script>
</head>

 . . .

</html>

Reference the Telerik assets from the cloud in a Server-side app

<!DOCTYPE html>
<html>
<head>
    . . .
    <link rel="stylesheet" href="https://unpkg.com/@@progress/kendo-theme-default@@latest/dist/all.css" />

    <!-- Choose only one of the themes -->
    <!-- 
        <link href="https://unpkg.com/@@progress/kendo-theme-bootstrap@@latest/dist/all.css" rel="stylesheet" />
        <link href="https://unpkg.com/@@progress/kendo-theme-material@@latest/dist/all.css" rel="stylesheet" />
    -->

    <script src="https://kendo.cdn.telerik.com/blazor/2.16.0/telerik-blazor.min.js" defer></script>
</head>

 . . .

</html>

Make sure that the version in the JS file URL matches the version of the Telerik UI for Blazor package.

If you decide to use a CDN over static assets, you may want to implement a fallback in case it is unavailable to your users.

We are considering a better CDN option for the themes. Until then, you can use the unpkg workaround above, or local dependency management as described below.

Optional Dependency Management

Instead of a CDN or our static assets, you can fetch the stylesheet into your project to, for example, customize the theme, or to bundle it with other stylesheets. To do this, you can:

Libman

The LibMan client-side dependency manager is built-in ASP.NET Core:

  1. In the server application root, add the libman.json file with the following content:

    libman.json

    {
      "version": "1.0",
      "defaultProvider": "unpkg",
      "libraries": [
        {
          "library": "@progress/kendo-theme-default@latest",
          "destination": "wwwroot/css/kendo-themes/default",
          "files": [
            "dist/all.css"
          ]
        },
        {
          "library": "@progress/kendo-theme-bootstrap@latest",
          "destination": "wwwroot/css/kendo-themes/bootstrap",
          "files": [
            "dist/all.css"
          ]
        },
        {
          "library": "@progress/kendo-theme-material@latest",
          "destination": "wwwroot/css/kendo-themes/material",
          "files": [
            "dist/all.css"
          ]
        }
      ]
    }
    

    There have been some reports that the @latest version sometimes does not work with a message similar to The "@progress/kendo-theme-material@latest" library could not be resolved by the "unpkg" provider. If trying again a bit later does not help, you can replace the @latest moniker with the current latest version of the theme that you can find at the Themes Repo Releases section. For example, ^3.0.0 to get the latest version of the major release 3. If you commit such a version, you may want to check for updates after a while.

  2. In the client Blazor application, go to the wwwroot/index.html file and replace the CDN link with the following one. For a server-side Blazor project, do that in the ~/Pages/_Host.cshtml file.

    Index file with local stylesheet

    <!DOCTYPE html>
    <html>
    <head>
        . . .
        <link href="/css/kendo-themes/default/dist/all.css" rel="stylesheet"/>
        <!-- Choose only one of the themes -->
        <!-- <link href="/css/kendo-themes/bootstrap/dist/all.css" rel="stylesheet" />
        <link href="/css/kendo-themes/material/dist/all.css" rel="stylesheet" /> -->
    </head>
    
        . . .
    
    </html>
    

NPM Packages

The Kendo UI Sass-based themes are located on the Progress NPM registry:

  • Kendo UI Default Theme—Available as @progress/kendo-theme-default.
  • Kendo UI Bootstrap v4 Theme—Available as @progress/kendo-theme-bootstrap.
  • Kendo UI Material Theme—Available as @progress/kendo-theme-material.

You can read more about using this approach in the Custom Theme - Manual Process article.

Bootstrap Notes

The Telerik Bootstrap Theme has a design that is similar to the Bootstrap framework style so you can better integrate the Telerik components in an app that already uses Bootstrap for layouts and styles.

Bootstrap and Telerik UI for Blazor are two completely separate products that do not share classes or code, however. You can use Bootstrap to create layouts and then put our components in those layouts by treating them like the <span> or <div> elements that they are. You can use Bootstrap classes and utilities on your own elements in the markup regardless of the components inside.

The Telerik Bootstrap theme is not the same as the Bootstrap framework (or styles), it is our own theme that uses the Bootstrap metrics and design approaches to fit into a Bootstrap layout better. It can also use customized variables from Bootstrap, and you can see one way to do that through building the SASS files for both Bootstrap and Telerik in the following sample app: Blazor Dashboard.

See Also

In this article
Not finding the help you need? Improve this article