First Steps with Telerik UI for Blazor

Updated on May 28, 2026

This article explains how to use the Telerik UI for Blazor components in web or hybrid Blazor applications. You will set up your Telerik development environment, create a new application from scratch, and finally, add a UI component to a Razor file.

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 license key, 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.

New to Telerik UI for Blazor?Telerik UI for Blazor is a professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.Start Free Trial

Prerequisites

To successfully complete the steps in this tutorial:

Install a supported .NET version.
Create a Telerik user account if you haven't one.

Set Up Telerik Development Environment

The fastest way to set up your Telerik development environment is to use the Telerik CLI .NET tool. Run the following commands in your preferred command shell (Visual Studio Terminal, cmd, PowerShell, Bash, macOS Terminal, or other).

If you have already set up your Telerik development environment and it doesn't need updating, skip to Create New Blazor App.

Install Telerik CLI
SH
```
dotnet tool install -g Telerik.CLI
```
Run the Telerik CLI setup command:
SH
```
telerik setup blazor
```

The setup command performs multiple actions at once to configure your Telerik development environment:

Log in to your Telerik account.
Activate a Telerik UI for Blazor trial if you don't have an active commercial license or trial.
Download a Telerik license key that includes all your licenses and trials.
Configure a Telerik NuGet package source.
Install MCP servers.
Install Telerik UI for Blazor project templates.

Create New Blazor App

This section assumes that you have successfully installed the Telerik UI for Blazor project templates in the previous step.

To create a new Telerik Blazor app, use your preferred approach:

.NET CLI Visual Studio or VS Code Telerik CLI

Use the .NET CLI dotnet new command to create a new Blazor Web App or WebAssembly Standalone App, depending on your preferences:

Create a Blazor Web App with interactive Server render mode

dotnet new telerik-blazor -o TelerikBlazorWebApp1 -int Server

Create a Blazor WebAssembly Standalone App

dotnet new telerik-blazorwasm -o TelerikBlazorWasmApp1

Create a new app by using one of the following project templates:

Telerik Blazor Web App
Telerik Blazor WebAssembly Standalone App

Run the following Telerik CLI command to create a new Telerik Blazor app interactively:

telerik create blazor

A Telerik Blazor Hybrid App template is also available, but it's outside the scope of this tutorial.

To manually add Telerik UI for Blazor to an existing Blazor app, follow the Workflow Details article.

Add Telerik Component

Run the new Blazor app in the browser. Then, add a new Telerik component. 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")}.";
    }
}

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.