Get started

1. Install

Radzen Blazor Components are distributed as the Radzen.Blazor nuget package.

You can add them to your project in one of the following ways

  • Install the package from command line by running dotnet add package Radzen.Blazor
  • Add the project from the Visual Nuget Package Manager
  • Manually edit the .csproj file and add a project reference

2. Import the namespace

Open the _Imports.razor file of your Blazor application and add these two lines @using Radzen and @using Radzen.Blazor.

3. Include a theme

Open Pages\_Layout.cshtml (Blazor Server .NET 6+), Pages\_Host.cshtml (Blazor Server before .NET 6) or wwwroot/index.html (Blazor WebAssembly) and include a theme CSS file by adding this snippet:

<link rel="stylesheet" href="_content/Radzen.Blazor/css/material-base.css">

To include a different theme (i.e. Standard) just change the name of the CSS file:

<link rel="stylesheet" href="_content/Radzen.Blazor/css/standard-base.css">

4. Include Radzen.Blazor.js

Open Pages\_Layout.cshtml (Blazor Server .NET 6+), Pages\_Host.cshtml (Blazor Server before .NET 6) or wwwroot/index.html (Blazor WebAssembly) and include this snippet

<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>

5. Use a component

Use any Radzen Blazor component by typing its tag name in a Blazor page e.g. <RadzenButton Text="Hi"></RadzenButton>

Setting a property

<RadzenButton Text="@text"></RadzenButton>
@code {
  string text = "Hi";

Handing events

<RadzenButton Click="@ButtonClicked" Text="Hi"></RadzenButton>
@code {
  void ButtonClicked()

6. Use Dialog, Notification, ContextMenu and Tooltip components

Open the Shared\MainLayout.razor file and include:

  • <RadzenDialog/>
  • <RadzenNotification/>
  • <RadzenContextMenu/>
  • <RadzenTooltip/>

Open Startup.cs file (Blazor Server before .NET 6) or Program.cs (Blazor WebAssembly or Blazor Server after .NET 6) and add:

  • DialogService
  • NotificationService
  • ContextMenuService
  • TooltipService

Startup.cs (Blazor Server before .NET 6)

    using Radzen;
    public void ConfigureServices(IServiceCollection services)

Program.cs (Blazor WebAssembly Blazor and Blazor Server after .NET 6)

    using Radzen;
    public static async Task Main(string[] args)
        var builder = WebAssemblyHostBuilder.CreateDefault(args);

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



        await builder.Build().RunAsync();

Next: Explore Demos

Hooray! You have successfuly added Radzen Blazor Components to your Blazor app. Now let's take a deeper look and explore more components and demos.

Explore Demos

Source Code licensed under MIT

An error has occurred. This application may no longer respond until reloaded. Reload 🗙