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

Using Telerik Blazor Themes with LibMan

Environment

Product UI for Blazor

Description

This KB article answers the following questions:

  • How to use LibMan to add Telerik themes to your Telerik Blazor app.
  • How to update local themes in wwwroot automatically when a new version is available.

LibMan is a client-side dependency manager, which is included in ASP.NET Core. You can use it to automatically download a Telerik theme to the wwwroot folder of your app, instead of using static NuGet assets or Telerik CDN.

The benefits of Libman are:

  • The Blazor app can use theme swatches, which are not available in the Telerik.UI.for.Blazor NuGet package.
  • The Blazor app is not dependent on remote CDN servers.
  • The theme in the wwwroot folder can update automatically.

Solution

You can use Libman to consume the following npm packages that are published on the UNPKG CDN:

The configuration process includes the steps below.

1. Create a libman.json File

Create a libman.json file in the root project folder. There are a few ways to do that:

  • Right-click the project in Visual Studio solution explorer, select Add and then Client-side Library....
  • Use the LibMan CLI.
  • Copy-paste and edit the sample libman.js code below.

Use the following information when creating the libman.json file:

  • Provider: unpkg
  • Library: @progress/kendo-font-icons@<PACKAGE-VERSION> or @progress/kendo-theme-<THEME-NAME>@<PACKAGE-VERSION>. Always specify a package version or use @latest.
  • Include files: the app requires dist/all.css for the themes, and dist/index.css and dist/kendo-font-icons.ttf for the font icons. See all available files for the desired package and version at unpkg, for example: https://unpkg.com/browse/@progress/kendo-theme-default@8.2.1/
  • Target location: the default one is wwwroot/lib/progress/<PACKAGE-NAME>/ and it depends on your preferences.

Using the @latest theme version requires the latest Telerik UI for Blazor version as well.

In rare cases the @latest version may produce an error similar to The "@progress/kendo-theme-default@latest" library could not be resolved by the "unpkg" provider. In such cases, replace the @latest moniker with a specific theme version, depending on the theme version compatibility with Telerik UI for Blazor. For example, use ^8.0.0 to get the latest version of the major release 8.

The libman.json file below adds the Main swatches of all built-in themes and the font icon stylesheet. Remove the theme or font icons entries that you don't need.

libman.js

{
  "version": "1.0",
  "defaultProvider": "unpkg",
  "libraries": [
    {
      "library": "@progress/kendo-theme-bootstrap@8.2.1",
      "destination": "wwwroot/lib/progress/kendo-theme-bootstrap/",
      "files": [
        "dist/all.css"
      ]
    },
    {
      "library": "@progress/kendo-theme-default@8.2.1",
      "destination": "wwwroot/lib/progress/kendo-theme-default/",
      "files": [
        "dist/all.css"
      ]
    },
    {
      "library": "@progress/kendo-theme-fluent@8.2.1",
      "destination": "wwwroot/lib/progress/kendo-theme-fluent/",
      "files": [
        "dist/all.css"
      ]
    },
    {
      "library": "@progress/kendo-theme-material@8.2.1",
      "destination": "wwwroot/lib/progress/kendo-theme-material/",
      "files": [
        "dist/all.css"
      ]
    },
    {
      "library": "@progress/kendo-font-icons@latest",
      "destination": "wwwroot/lib/progress/kendo-font-icons/",
      "files": [
        "dist/index.css",
        "dist/kendo-font-icons.ttf"
      ]
    }
  ]
}

2. Register the CSS Files

The CSS file URL(s) depend on the "destination" values in libman.json. Always register just one theme CSS file.

Add a CSS file reference to web page <head>

<!-- Telerik theme -->
<link rel="stylesheet" href="lib/progress/kendo-theme-default/dist/all.css" />
<!-- Optional Telerik font icons -->
<link rel="stylesheet" href="lib/progress/kendo-font-icons/dist/index.css" />

3. Enable Automatic Updates on App Build

Install the Microsoft.Web.LibraryManager.Build NuGet package in your Blazor app, so that the dependencies in libman.json are resolved and updated at build-time by LibMan. If a package version is already restored, you may need to rebuild the app to update it.

See Also

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