Getting Started

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

First Steps with Client-Side UI for Blazor

This article explains how to get the Telerik UI for Blazor components in your Client-side (WebAssembly) Blazor project and start using them quickly. The process consists of the following steps:

  1. Set Up a Blazor Project
  2. Add the Telerik Blazor Components to an Existing Project
    1. Add the Telerik NuGet Feed to Visual Studio
    2. Enable the Components in the Project
  3. Add a Telerik Component to a View

If you are familiar with the Telerik NuGet Feed and Blazor in general, you may want to follow the shorter, more technical getting started article: What You Need. The current article is designed as a step-by-step tutorial for new users and starts from the basics.

Step 0 - Download the Components

To follow the steps in this tutorial, you need access to the Telerik UI for Blazor components. The recommended download methods differ depending on your Telerik UI for Blazor license - trial or commercial.

Download the Free Trial Version

If you want to try Telerik UI for Blazor, you can download a free, fully functional trial. The trial offers the same functionality as the commercially licensed version.

Download the Commercial Version

The easiest way to get the commercially licensed Telerik UI for Blazor components to your development machine is to use the Progress Control Panel or to download the automated installer from your telerik.com account.

Alternatively, you can also access the .nupkg files from our private NuGet feed or by creating a local feed from your installation.

Step 1 - Set Up a Blazor Project

Make sure that you have installed the following:

The latest version of Telerik UI for Blazor is 3.4.0, and it supports .NET Core 3.1.11 and .NET 6.

To create a client-side Blazor app, use an ASP.NET Core hosted Blazor project:

Create a Project with the Telerik VS Extensions

You can use the Telerik Visual Studio Extensions that will create and automatically configure the project so that you can start using the components immediately.

If you prefer VS Code, you can use the VS Code Extension to create a Telerik-enabled project.

If you choose to create a project with the Telerik VS Extensions, you can jump directly to Step 3 - Add a Telerik Component to a View. The following sections in this article explain the manual steps to configure the project so that you can better understand the underlying process.

Create a Project with Visual Studio

To create a project manually, without using the Telerik VS Extensions, follow these steps:

  1. Open Visual Studio (2019 for .NET 3.x and .NET 5; 2022 for .NET 6).

  2. Create a New Project.

  3. Choose Blazor App and click Next. Then, choose a name and location for the project and click Create.

    Create new ASP.NET Core Web Application

  4. Choose the Blazor WebAssembly App project type, select the ASP.NET Core hosted checkbox, and click Create.

    Select Blazor Project Type

Create a Project with the CLI

If you are not running Visual Studio, you can create the Blazor project from the command prompt. See the dotnet new command and the arguments for Blazor apps.

Step 2 - Add the Telerik Blazor Components to an Existing Project

Add the Telerik NuGet Feed to Visual Studio

The recommended distribution method for the Telerik UI for Blazor packages is the private Telerik NuGet feed.

Telerik now offers NuGet v3 API for our feed which is faster, lighter, and reduces the number of requests from NuGet clients. It is available at https://nuget.telerik.com/v3/index.json. We recommend switching to the v3 API since the old https://nuget.telerik.com/nuget server will be deprecated.

If you don't have an active license, start a free trial - this will let you download the installation file, install the components, and use the Telerik NuGet feed. During the installation, select the Set up Telerik NuGet package source checkbox and the installer will configure the Telerik online NuGet feed automatically:

Automatic Telerik NuGet feed installation

If you prefer to configure the NuGet package source manually, follow the steps in the Setup the Telerik Private NuGet Feed article.

Once you have added the Telerik NuGet feed, continue by enabling the components in the project.

Enable the Components in the Project

To prepare the project for the Telerik UI for Blazor components, install the Telerik.UI.for.Blazor NuGet package, and then configure the project. For detailed instructions, see the video tutorial below or follow the instructions after the video.

1. Manage NuGet Packages

Right-click the Client project in the solution and select Manage NuGet Packages:

Manage NuGet Packages

2. Install the Telerik Package

Choose the telerik.com feed, find the Telerik.UI.for.Blazor package and click Install (make sure to use the latest version). If you don't have a commercial license, you will see only Telerik.UI.for.Blazor.Trial. Use that instead.

Add Telerik Blazor Package to Client Project

3. Add the JavaScript File

Add the telerik-blazor.js file to your main index file - wwwroot/index.html:

HTML

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

    <!-- For Trial licenses use
      <script src="_content/Telerik.UI.for.Blazor.Trial/js/telerik-blazor.js" defer></script>
    -->
</head>

To enable the use of static assets in your project, add the following line to the startup file of your Server project:

  • Startup.cs for .NET 3.x and .NET 5
  • Program.cs for .NET 6

C#

namespace MyBlazorAppName
        {
            public class Startup
            {
                public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
                {
                    //more code may be present here

                    //make sure this is present to enable static files from a package
                    app.UseStaticFiles();

                    //more code may be present here
                }
            }
        }


//more code may be present here

//make sure this is present to enable static files from a package
app.UseStaticFiles();

//more code may be present here

4. Add the Stylesheet

Open the ~/wwwroot/index.html file in the client web application and register the Theme stylesheet:

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

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

5. Register the Telerik Blazor Service

Open the ~/Program.cs file in the client web application and register the Telerik Blazor service:

C#

using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.DependencyInjection;
using System.Threading.Tasks;
using System.Net.Http;
using System;

namespace ClientBlazorProject.Client // make sure this matches your actual WASM project namespace
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            // sample host builder for a WASM app, yours may differ
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // there may be more code here

            // register the Telerik services
            builder.Services.AddTelerikBlazor();

            // there may be more code here
            // sample host builder for a WASM app, yours may differ
            await builder.Build().RunAsync();
        }
    }
}

using ClientBlazorProject;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

// sample host builder for a WASM app, yours may differ
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

// register the Telerik services
builder.Services.AddTelerikBlazor();

await builder.Build().RunAsync();

6. Add Usings

Add the following to your ~/_Imports.razor file so the project recognizes the Telerik components in all files:

_Imports.razor

@using Telerik.Blazor
@using Telerik.Blazor.Components

7. Add the Telerik Layout

Next to your main layout file (by default, the ~/Shared/MainLayout.razor file in the Blazor project), add a Razor component called TelerikLayout.razor with the following content:

@inherits LayoutComponentBase

<TelerikRootComponent>
    @Body
</TelerikRootComponent>

8. Configure the Main Layout

Open the main layout file (by default, the ~/Shared/MainLayout.razor file in the Blazor project), and add @layout TelerikLayout as the first line in the file. This will ensure that the TelerikRootComponent wraps all the content in MainLayout. Alternatively, the TelerikRootComponent can reside directly in MainLayout, but we place it in another file for better separation of concerns.

@layout TelerikLayout
@inherits LayoutComponentBase

@* @Body and other code will be present here depending on your project *@

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

Step 3 - Add a Telerik Component to a View

The final step is to use a component in a view and run it in the browser. For example:

  1. Add a Button component to the ~/Pages/Index.razor view:

    RAZOR

    <TelerikButton>Say Hello</TelerikButton>

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

    RAZOR

    @page "/"

<TelerikButton OnClick="@SayHelloHandler" ThemeColor="primary">Say Hello</TelerikButton>

<br />

@helloString

@code {
   MarkupString helloString;

   void SayHelloHandler()
   {
       string msg = string.Format("Hello from <strong>Telerik Blazor</strong> at {0}.<br /> Now you can use C# to write front-end!", DateTime.Now);
       helloString = new MarkupString(msg);
   }
}

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

    App in the browser

Now you have the Telerik components running in your Blazor app.

Next Steps

Next, you can explore the live demos and the rest of the documentation. You can also find the entire demos project in the demos folder of your local installation. The project is runnable and you can inspect, modify, and copy its code. The project targets the latest official .NET version, and its readme file provides more details on running the project and using older versions of the framework.

Many applications have a data grid component, and you can get started with the full-featured Telerik Grid by visiting the Grid Overview article.

We recommend to get familiar with the fundametals of data binding our components. This information is applicable for all databound components.

Finally, you can explore the List of Components and pick the ones you are interested in.

See Also

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