Radzen Blazor Components

Get started

Quickstart Video

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 NuGet explorer
  • Manually edit the .csproj file and add a project reference
info_outline
If you want to use the Radzen.Blazor components in Blazor 8 static rendering mode (SSR) you should be aware that:
  • Static rendering mode does not support events and all component interactivity will not be available (e.g. opening a dropdown, sorting a datagrid, opening a dialog).
  • Applications created using the Blazor 8 template use static rendering mode by default and only some pages (Counter.razor) have interactivity enabled.
  • The layout is not interactive by default (MainLayout.razor). Blazor components added to it will not be interactive as a result.
  • You can enable interactivity per component basis via the @rendermode attribute e.g. <RadzenDialog @rendermode="@RenderMode.InteractiveServer" />. Components that have child content cannot use that approach. You will need a wrapper component with render mode set as an attribute.
  • You can enable interactivity for the entire application.

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), wwwroot/index.html (Blazor WebAssembly) or Components\App.razor (Blazor .NET 8) 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">

Make sure you have also bootstrap CSS:

<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">

4. Include Radzen.Blazor.js

Open Pages\_Layout.cshtml (Blazor Server .NET 6), Pages\_Host.cshtml (Blazor Server .NET 7), wwwroot/index.html (Blazor WebAssembly) or Components\App.razor (Blazor .NET 8) 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()
  {
    //
  }
}
warning_amber
All Radzen Blazor components with events are interactive and cannot work in .NET 8 Static @rendermode. Make sure the components @rendermode is set to InteractiveServer or InteractiveWebAssembly or they are nested inside interactive parent.

6. Use Dialog, Notification, ContextMenu and Tooltip components

Open the Shared\MainLayout.razor file and include:

  • <RadzenComponents/>
warning_amber
Make sure that you do not nest RadzenComponents 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 required services:

Startup.cs (Blazor Server before .NET 6)


    using Radzen;
    ...
    public void ConfigureServices(IServiceCollection services)
    {
        ...
        services.AddRadzenComponents();
        ...
    }
    

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.AddRadzenComponents();
        ...

        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

Supercharge your Blazor development with Radzen Blazor Studio

Radzen Blazor Studio is a software development environment that empowers developers to design, build and deploy Blazor applications without the traditional hurdles. Write less code and get more done.

open_in_new Learn More
>Radzen Blazor Studio

Radzen Blazor Components, © 2018-2024 Radzen.
Source Code licensed under MIT

Demos Configuration

Premium Themes

  • Material 3
  • Fluent
  • Material 3 Dark
  • Material Dark
  • Fluent Dark

Free Themes

  • Material
  • Standard
  • Default
  • Humanistic
  • Software
  • Dark
An error has occurred. This app may no longer respond until reloaded. Reload 🗙