First Steps with Blazor Web App and Telerik UI

Updated on Jan 6, 2026

This article explains how to use the Telerik UI for Blazor components in a Blazor Web App project template that exists for .NET 8 and 9. You will create a new application from scratch, learn how to add the UI for Blazor components to a project, and finally, add a UI component to a view.

This step-by-step tutorial starts with the basics and is suitable for first-time Blazor or Telerik component users. If you are already familiar with the Telerik NuGet source, components, and Blazor in general, you may prefer the Telerik UI for Blazor Workflow Details article. It provides more setup options and suggests possible enhancements.

Telerik UI for Blazor requires interactive render mode. Using Global Interactivity location is highly recommended.

Prerequisites

• To successfully complete the steps in this tutorial, make sure you have an up-to-date Visual Studio, which is compatible with the supported .NET version of your choice. If you are not using Visual Studio, some of the steps require using the .NET CLI or editing files manually. In this case, also refer to the Workflow Details tutorial.

• To learn more about the compatibility of the Telerik UI for Blazor components with different browser and .NET versions, see the system requirements.

• This online documentation covers the latest version of Telerik UI for Blazor, which is 12.2.0. If needed, download the offline PDF documentation for the required older product version.

Step 0: Download Telerik UI for Blazor

• If you have already purchased a commercial Telerik UI for Blazor license, continue with the next step and install a license key.

• If you are new to UI for Blazor and haven't purchased a license yet, you can Start a Free Trial by downloading and installing the UI for Blazor components—this will activate your free trial and allow you to use the components. During the installation, select the Set up Telerik NuGet package source checkbox and the installer will configure the Telerik online NuGet feed automatically. You will use this feed later in the tutorial.

Trial users must complete the installation of the components. Otherwise their trial license will not activate and you cannot complete the tutorial successfully.

Step 1: Install a 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:

1. Go to the License Keys page in your Telerik account.
2. Click the Download License Key button.
3. 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.

Step 2: Create a New Project

To create a new Blazor app:

1. Open your preferred IDE or run the dotnet new .NET CLI command.
2. Use the Blazor Web App project template.
3. Select the desired interactive render mode.
4. Enable Global Interactivity location.

Interactive Render Mode

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.

Step 3: Add the Telerik NuGet Feed

In this tutorial, you will use the Telerik NuGet server to download the UI for Blazor components. The NuGet feed is private and requires you to authenticate with a NuGet API key.

Generate NuGet API Key

1. Go to the API Keys page in your Telerik account.
2. Click Generate New Key +.
3. In the Key Note field, add a note that describes the API key.
4. Click Generate Key.
5. Select Copy and Close. Once you close the window, you can no longer copy the generated key. For security reasons, the API Keys page displays only a portion of the key.
6. Store the generated NuGet API key as you will need it in the next steps.

Next, add the Telerik NuGet feed to your local development environment:

• Visual Studio on Windows
• All IDEs and operating systems

For more information on the Telerik NuGet packages and download options, check the NuGet Packages section in the Workflow article.

Visual Studio

The following approach will store the Telerik NuGet server URL in your global NuGet.Config file, and save your NuGet API key in the Windows Credential Manager.

1. In Visual Studio, go to Tools > NuGet Package Manager > Package Manager Settings.
2. Select Package Sources and then click the + or Add button.
3. Enter a Name for the new package source. The examples in this documentation usually use TelerikOnlineFeed.
4. Add https://nuget.telerik.com/v3/index.json as a Source URL. Click OK or Save.
5. Whenever Visual Studio displays a dialog to enter credentials for nuget.telerik.com, use api-key as the username and your NuGet API key as the password.

All IDEs and Operating Systems

Run dotnet nuget add source in your preferred command line interface (cmd, Terminal, PowerShell, Bash). The command will store the Telerik NuGet server URL and your NuGet API key in your global NuGet.Config file.

Replace <YOUR-NUGET-API-KEY> with the API key that you generated previously.

Use the .NET CLI to add the Telerik NuGet source

SH

dotnet nuget add source https://nuget.telerik.com/v3/index.json \
--name TelerikOnlineFeed \
--username api-key \
--password <YOUR-NUGET-API-KEY> \
--store-password-in-clear-text

Step 4: Install the Telerik UI for Blazor Components

Add the Telerik.UI.for.Blazor package from the NuGet source that you added earlier to every project that will use the Telerik Blazor components. Apps with global interactive Auto or WebAssembly render mode need the Telerik NuGet package in the Client project.

When prompted, authenticate using api-key as the username and your NuGet API key as the password.

Step 5: Enable the Blazor UI Components

To enable the Telerik UI for Blazor components, you must add several client-side dependencies to the application, include the required @using statements, add the TelerikRootComponent component, and register the Telerik Blazor service.

5.1. Add the Telerik UI for Blazor Client Assets

1. Add the telerik-blazor.js file to your App.razor file as a static asset.

HTML

HTML

<head>
    . . .
    <script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js"></script>
</head>

2. To select the appearance and color scheme for the Telerik Blazor components, add the theme stylesheet as a static asset in your App.razor file.

HTML

HTML

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

5.2. Include @using Statements

Add the @using directives below in the ~/_Imports.razor file in all projects in which you installed the Telerik NuGet package in Step 4. This configures the project to recognize the Telerik components in all files. You can register one or both icon namespaces, depending on the icon type you use.

RAZOR

@using Telerik.Blazor
@using Telerik.Blazor.Components
@using Telerik.SvgIcons
@using Telerik.FontIcons

5.3. Add the TelerikRootComponent

Use a single TelerikRootComponent component as a top-level component in the app.

The TelerikRootComponent requires interactive render mode. Layout components are interactive only in applications with Global Interactivity location. This section applies only to apps with Global interactivity. If your app is using Per page/component interactivity, then check Using TelerikRootComponent in apps with per component interactivity instead.

Add a <TelerikRootComponent> to the app layout file (by default, MainLayout.razor). Make sure that the TelerikRootComponent wraps all the content in the MainLayout.

MainLayout.razor

RAZOR

@inherits LayoutComponentBase

<TelerikRootComponent>
    @* existing MainLayout.razor content here *@
</TelerikRootComponent>

You can learn more about the TelerikRootComponent purpose and usage in its dedicated documentation.

5.4. Register the Telerik Blazor Service

In a Blazor Web App project with interactive render mode Server, you register services in the Program.cs file of your project.

For interactive render modes WebAssembly and Auto, register the service in the Program.cs file of both the server and client project.

C#

C#

// ...

var builder = WebApplication.CreateBuilder(args);

// ...

builder.Services.AddTelerikBlazor();

// ...

var app = builder.Build();

Now your Blazor Server project can use the Telerik UI for Blazor components.

Step 6: Add a Component to a View

The final step in this tutorial is to use a Telerik UI for Blazor component in a view and run it in the browser.

1. In .../Pages/Home.razor in the server or client project, add a TelerikButton component.

   RAZOR

   <TelerikButton>Say Hello</TelerikButton>

2. Optionally, hook up a click handler that will show a message. The resulting view will look like this:

   RAZOR

   @page "/"
           
   <TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Primary"
                  OnClick="@SayHelloHandler">Say Hello</TelerikButton>
   
   <p>@HelloString</p>
   
   @code {
       private MarkupString HelloString { get; set; }
   
       private void SayHelloHandler()
       {
           string msg = $"Hello from <strong>Telerik UI for Blazor</strong> at {DateTime.Now.ToString("HH:mm:ss")}!" +
               "<br /> Now you can use C# to write front-end!";
   
           HelloString = new MarkupString(msg);
       }
   }

3. Run the app in the browser. You should see something like this:

   

Well done! Now you have your first Telerik UI for Blazor component running in your Blazor app, showcasing the power of front-end development with Blazor.

Step 7: Install the Telerik AI Coding Assistant

Use the Telerik AI Coding Assistant through the Telerik Blazor MCP server. This tool helps you receive tips and generate code snippets that include Telerik UI for Blazor components and APIs.

Next Steps

• Check the list of available components.
• Explore the live Telerik UI for Blazor demos.
• Learn the data binding fundamentals for Telerik UI for Blazor components.
• Get started with the data Grid.
• Review the built-in themes or create custom ones.

See Also

• Workflow Details for Telerik UI for Blazor
• Using Blazor Sections inside Telerik Components
• Getting Started Videos for Blazor
• First Steps with Blazor WebAssembly