GitHub
auto_awesome

Enjoy Material 3

This is a preview of Radzen's new Material 3 premium theme, available only to Radzen Professional or Enterprise subscribers.

Browse components with a free theme by selecting one from the dropdown above.

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
  • 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

Introducing 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.


Source Code licensed under MIT

New

Radzen
Blazor Studio

Accelerated, smarter, and cost-effective Blazor development

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.

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