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

Workflow Details for Using Telerik UI for Blazor Components

Updated on May 28, 2026

This article describes the required steps to use the Telerik UI for Blazor components in any kind of Blazor application and any .NET version. The content below describes how to obtain the Telerik UI for Blazor components and configure your project to use them.

The information in this article builds on top of the First Steps with Telerik UI for Blazor tutorial.

The differences between the above tutorial and this page are:

The above First Steps tutorial describes the fastest and simplest way to get started with Telerik UI for Blazor. It is suitable for first-time Blazor or Telerik component users.

The current Workflow Details article assumes some Blazor experience and knowledge about the Blazor application structure. It requires manual configuration steps that help you learn about Telerik UI for Blazor in more depth.

It's best for first-time users to start from the First Steps tutorial and then come back to this article. Developers who have already set up Telerik Blazor apps can use this article.

The required milestones to obtain and use Telerik UI for Blazor are:

Install the Telerik Blazor NuGet packages in your Blazor application.
Install a Telerik license key.
Register the required namespaces.
Add the Telerik Blazor service.
Add the CSS theme and JavaScript file.
Add the <TelerikRootComponent>.
Add components to a view.
Install the Telerik Blazor AI Tools.

NuGet Packages

Telerik UI for Blazor is distributed through NuGet packages. The content below lists them all and explains how to obtain them.

Telerik.UI.for.Blazor is the only NuGet package that you must reference in the app. This package references all others as dependencies.

Starting from Telerik UI for Blazor version 14.0.0, all required NuGet packages are available on nuget.org.

NuGet Package Name	Description
`Telerik.UI.for.Blazor`	Contains the main code of the UI components. Required for all Telerik UI for Blazor applications.
`Telerik.Licensing`	Verifies the licensing status of the developer during app build. Requires a license key.
`Telerik.SvgIcons`	Contains all Telerik SVG icons.
`Telerik.FontIcons`	Contains all Telerik font icons.
`Telerik.DataSource`	Adds support for data operations. All databound UI components use it for paging, sorting, filtering, or grouping.
`Telerik.Recurrence`	Adds support for recurring appointments in the Scheduler component.
`Telerik.Documents.SpreadsheetStreaming`	Adds support for working with spreadsheet documents, and exporting to Excel or CSV. This package is part of Telerik Document Processing.
`Telerik.Zip`	Contains code for working with ZIP archives and Excel files. Excel files are actually ZIP archives and this package takes part in the exporting process. This package is part of Telerik Document Processing.
`Telerik.Pivot.Core`	Contains base code for the PivotGrid component. This NuGet package must not be used separately without the Telerik PivotGrid component.
`Telerik.Pivot.DataProviders.Xmla`	Adds support for data binding the PivotGrid component to XMLA. This NuGet package must not be used separately without the Telerik PivotGrid component.

Getting the Telerik NuGet Packages

You can get the Telerik UI for Blazor packages and their dependencies in four ways:

nuget.org. This is usually the most convenient option, and your NuGet client will notify you about new component versions. The other options below can be useful as an emergency alternative, or in environments with restricted Internet connection.
Telerik private NuGet package source—use only for Telerik UI for Blazor versions 13.3.0 and older. Note that the icon and licensing packages must be downloaded from nuget.org, regardless of the Telerik UI for Blazor version.
Automated installer
ZIP archive
As standalone .nupkg files. To use them, follow the instructions at ZIP archive, but download the .nupkg files instead.

Always check the Telerik UI for Blazor release notes when updating the components. New major versions can contain breaking changes.

License Key

This documentation section applies to Telerik UI for Blazor version 8.0.0 and above. Older versions do not require a license key.

To download and install your Telerik license key:

Go to the License Keys page in your Telerik account.
Click the Download License Key button.
Save the telerik-license.txt file to:
- (on Windows) %AppData%\Telerik\telerik-license.txt, for example, C:\Users\...\AppData\Roaming\Telerik\telerik-license.txt
- (on Mac or Linux) ~/.telerik/telerik-license.txt, for example, /Users/.../.telerik/telerik-license.txt

This will make the license key available to all Telerik .NET apps that you develop on your local machine.

The Telerik License Key article provides additional details on installing and updating your Telerik license key in different scenarios. Automatic license key maintenance is more effective and recommended in the long run.

Interactive Render Mode

This section applies to Blazor Web Apps. It is not relevant to Blazor WebAssembly Standalone apps or Blazor Hybrid apps.

Telerik UI for Blazor requires interactive render mode. Using Global Interactivity location is highly recommended, as it ensures easier setup and usage of the Telerik components.

The Telerik Blazor components will not respond to user actions and the Blazor framework will not refresh their UI in Static server-side rendering mode (static SSR). Telerik Blazor components with JavaScript rendering (Barcodes, Charts, Gauges, Maps, and QR Codes) will not render in static SSR at all.

The Account section in the Blazor Web App template with identity is static by design. Most Telerik Blazor components cannot work in this section.

Namespaces

The .NET compiler requires several Telerik namespaces to recognize the Telerik Blazor components and set some of the component parameters.

There are a few other optional namespaces that may be needed often. You can import them globally for your convenience.

_Imports.razor

RAZOR

@* required *@
@using Telerik.Blazor // recognize event arguments and component parameter values
@using Telerik.Blazor.Components // recognize component tags and instance types

@using Telerik.SvgIcons // use SVG icons
@* or *@
@using Telerik.FontIcons // use font icons

@* optional *@
@using Telerik.DataSource // implement data-related programmatic customizations
@using Telerik.DataSource.Extensions // use OnRead events and ToDataSourceResult()

To avoid the need to register Telerik namespaces in .cs files, use global using:

Program.cs or MauiProgram.cs

// required
global using Telerik.Blazor; // recognize event arguments and component parameter values
global using Telerik.Blazor.Components; // recognize component tags and instance types

global using Telerik.SvgIcons; // use SVG icons
@* or *@
global using Telerik.FontIcons; // use font icons

// optional
global using Telerik.DataSource; // implement data-related programmatic customizations
global using Telerik.DataSource.Extensions; // use OnRead events and ToDataSourceResult()

Service

The Telerik Blazor service provides component localization and registers the default service that implements ITelerikStringLocalizer.

The Telerik Blazor components render all their built-in labels through this localization mechanism for consistency, even when .NET localization is not used.

Program.cs or MauiProgram.cs

builder.Services.AddTelerikBlazor();

To localize the Telerik Blazor components, always register your own ITelerikStringLocalizer service after builder.Services.AddTelerikBlazor();.

CSS Theme and JavaScript Files

The Telerik UI for Blazor components require a theme stylesheet and a JSInterop file.

To use static CSS and JS assets from the NuGet package in a project, make sure that the project allows it, which is true by default. To prevent browser caching of the Telerik static NuGet assets during version upgrades:

In .NET 9 and later versions, you can use MapStaticAssets() in Program.cs and @Assets["..."] in App.razor.
Add the Telerik UI for Blazor version number to the CSS and JavaScript file URLs.

CSS Theme

Register the Telerik theme stylesheet in the <head> of the web page. Add the theme before the application stylesheet and the CSS isolation stylesheet. This CSS file order lets you override Telerik theme styles more easily, if necessary.

Adding the Telerik Blazor CSS files

HTML

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

    <!-- Add only if using font icons -->
    <!--<link href="_content/Telerik.UI.for.Blazor/css/kendo-font-icons/font-icons.css" rel="stylesheet" />-->

    <!-- main application stylesheet -->
    <link rel="stylesheet" href="css/app.css" />
    <!-- CSS isolation stylesheet -->
    <link rel="stylesheet" href="AppName.styles.css"  />
</head>

JavaScript File

Telerik Blazor components rely on a JavaScript JSInterop file for some interactive features and communication between the .NET runtime and the web page.

The recommended way to register the Telerik Blazor JS file for better loading performance and reliable Blazor startup is:

Register telerik-blazor.js in the <head> of the web page with a defer attribute. This allows the JavaScript file to load as a non-blocking resource together with the rest of the web page.
Set autostart="false" to the Blazor framework <script> tag.
Start the Blazor client-side framework in the DOMContentLoaded event.

Adding the Telerik Blazor JavaScript file

HTML

<!DOCTYPE html>
<html>
<head>
   <script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js" defer></script>
</head>
<body>
   <script src="_framework/blazor.web.js" autostart="false"></script>
   <script>
      document.addEventListener("DOMContentLoaded", function () {
         Blazor.start();
      });
   </script>
</body>
</html>

All the information in this section also applies when using the Telerik CDN. However, Telerik recommends using static assets, as shown above. Remote asset URLs require a CDN fallback and manual maintenance during component version updates.

TelerikRootComponent

The TelerikRootComponent is a special component in Telerik UI for Blazor:

It can apply settings to all other Telerik Blazor components in the application.
It renders all component popups. All Telerik Blazor components that use popups will throw an exception if they cannot detect the TelerikRootComponent.

The TelerikRootComponent placement depends on the Blazor app hosting model and interactivity location. The component should reside in a layout file, but only if the layout file supports interactive render mode.

The instructions and code example below apply to:

Blazor Web Apps with Global interactivity location

Blazor WebAssembly Standalone and Blazor Hybrid apps

If you have a Blazor Web App with Per page/component interactivity location, then the correct TelerikRootComponent usage is different. The component still needs to wrap all other Telerik components, but it cannot reside in a static layout file, because the other Telerik components will not detect it. Refer to section Interactivity Considerations and article Using TelerikRootComponent with Per Page/Component Interactivity.

Optimal TelerikRootComponent Usage

Add a <TelerikRootComponent> component in the topmost layout file of the Blazor application. The TelerikRootComponent should enclose all the layout file content and all visible content on the web page. This setup ensures correct popup position and correct propagation of global settings to all Telerik Blazor components in the app.

Create a new layout file in the app, for example, TelerikLayout.razor.
Place the new layout in the same folder as the default application layout MainLayout.razor.
Add a <TelerikRootComponent> tag to the new layout and set @Body as the root component's child content.
Make the new layout a parent of the default application layout.

Adding TelerikRootComponent to a new layout

RAZOR
@inherits LayoutComponentBase

<TelerikRootComponent>
    @Body
</TelerikRootComponent>
RAZOR
@inherits LayoutComponentBase
@layout TelerikLayout

@* The other MainLayout.razor content remains the same. *@

Check the TelerikRootComponent documentation for more information about its purpose and usage.

Add Telerik Components to a View

The Blazor application is ready to use Telerik components. For example, add a TelerikButton component in Home.razor:

Home.razor

<TelerikButton OnClick="@OnButtonClick">
    Telerik Blazor Button
</TelerikButton>

<p>@ButtonClickLog</p>

@code {
    private string ButtonClickLog { get; set; } = string.Empty;

    private void OnButtonClick()
    {
        ButtonClickLog = $"Telerik Button clicked at {DateTime.Now.ToString("HH:mm:ss.fff")}.";
    }
}

Install the Telerik AI Tools

Telerik UI for Blazor provides AI-powered development assistance through a unified MCP (Model Context Protocol) server that delivers intelligent, context-aware help directly in your IDE. The MCP server automatically recognizes your Telerik license and activates the available tools:

Agentic UI Generator—Build complete, production-ready UIs using natural language prompts. Describe your desired page, layout, or component configuration, and the AI-powered generator will create responsive, styled Blazor code with proper Telerik UI for Blazor component integration.

This unified MCP server integrates seamlessly with your IDE to provide contextual help and automate repetitive tasks, making it easier to explore the library and build feature-rich applications faster. Give the AI tools a try as you follow this guide or build your next project!