GitHub

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 .NET 7) 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 .NET 7) 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/>
warning_amber
Make sure that you do not nest RadzenDialog, RadzenNotification, RadzenContextMenu or RadzenTooltip inside a positioned element (i.e. with position: relative, position: absolute or position: fixed). To be safe you can add them at the end of the layout file after all other elements.

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)
    {
        ...
        services.AddScoped<DialogService>();
        services.AddScoped<NotificationService>();
        services.AddScoped<TooltipService>();
        services.AddScoped<ContextMenuService>();
        ...
    }
    

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.RootComponents.Add<App>("app");

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

        ...

        builder.Services.AddScoped<DialogService>();
        builder.Services.AddScoped<NotificationService>();
        builder.Services.AddScoped<TooltipService>();
        builder.Services.AddScoped<ContextMenuService>();
        ...

        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

Introducing Radzen Blazor Studio

Radzen Blazor Studio is a desktop tool that empowers developers to create beautiful business Blazor apps. Develop your Blazor Server and WebAssembly applications visually with familiar WYSIWYG interface.


Source Code licensed under MIT

New

Radzen
Blazor Studio

Radzen Blazor Studio is a desktop tool that empowers developers to create beautiful Blazor apps.

Develop your Blazor Server and WebAssembly applications visually with familiar WYSIWYG interface.

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