client-blazor.md

title	page_title	description	slug	tags	published	position
Client-side Blazor	First Steps with Client-side UI for Blazor	First Steps with UI for Blazor Client-side	getting-started/client-side	get,started,first,steps,client	true	1

First Steps with Client-side UI for Blazor

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

1. Set Up a Blazor Project
2. Add the Telerik NuGet Feed to Visual Studio
3. Add the Telerik Components to Your Project
4. Add a Telerik Component to a View

@template

@template

Add the Telerik Components to Your Project

For client-side Blazor, we recommend the usage of Blazor (ASP.NET Hosted) project. @template

1. Choose the Blazor (ASP.NET Hosted) project type and click Create.

   

Add to Existing Project

@template

1. Right-click on the `Client` project in the solution and select `Manage NuGet Packages`:

   ![](images/manage-nuget-packages-for-client-app.png)

1. 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 only see `Telerik.UI.for.Blazor.Trial`. Use that instead.

     ![Add Telerik Blazor Package to Client Project](images/add-telerik-nuget-to-client-app.png)

1. Open the ~/wwwroot/index.html file in the client web application and register the [Theme stylesheet]({%slug general-information/themes%}) (make sure to use the correct version that matches the official Kendo UI for jQuery release number):

   HTML

    <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-default@latest/dist/all.css" />
   

2. @template

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

   C#

     namespace MyBlazorAppName.Client
     {
         public class Startup
         {
             public void ConfigureServices(IServiceCollection services)
             {
                 //more code may be present here
                 services.AddTelerikBlazor();
             }
             
             //more code may be present here
         }
     }
   

4. @template

   MainLayout.razor

    @[template](/_contentTemplates/common/get-started.md#telerik-main-container-snippet)
   

5. @template

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

Add a Telerik Component to a View

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

1. Add a Button component to the ~/Pages/Index.cshtml view: @template

See Also

• [Get Started with Server-side Blazor]({%slug getting-started/server-side%})
• [Telerik Private NuGet Feed]({%slug installation/nuget%})