Radzen Blazor Components

Get started

Radzen Blazor Components are free and open source. Star the GitHub repo ⭐ to support the project and help other Blazor developers discover it.

1. InstallLink to this section

The Radzen Blazor components are distributed via the Radzen.Blazor nuget package.

You can add the Radzen.Blazor nuget package to your Blazor application in one of the following ways:

  • Via Visual Studio's Nuget Package Manager.
  • Via command line dotnet add package Radzen.Blazor
  • By editing your application's .csproj file and adding a package reference <PackageReference Include="Radzen.Blazor" Version="*" />

2. Import the namespaceLink to this section

Open the _Imports.razor file of your Blazor application and append the following:

@using Radzen
@using Radzen.Blazor

3. Set the themeLink to this section

Open the App.razor file of your application. Add this code within the <head> element:

<RadzenTheme Theme="material" />

Open the Program.cs file and include:

builder.Services.AddRadzenComponents();

4. Include Radzen.Blazor.jsLink to this section

Open the App.razor file of your application. Add this code after the last <script>:

<script src="_content/Radzen.Blazor/Radzen.Blazor.js?v=@(typeof(Radzen.Colors).Assembly.GetName().Version)"></script>

5. Use a componentLink to this section

Use any Radzen Blazor component by typing its tag name in a Blazor page:

<RadzenButton Click="@ButtonClicked" Text="Hi"></RadzenButton>
@code {
  void ButtonClicked()
  {
    // Handle the Click event of RadzenButton
  }
}

6. Use Dialog, Notification, ContextMenu and Tooltip componentsLink to this section

Open the MainLayout.razor file and include:

<RadzenComponents @rendermode="InteractiveAuto" />

Next: Explore Demos

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

Explore Demos

Radzen Blazor Newsletter

Get an email when new components and releases ship.

All the tools in one place

Save Hours on Every Project

With Radzen Blazor subscription you get the full toolkit, including:

Dedicated support backed by proven expertise

Premium themes and theme editor

Ready-to-use UI blocks

Complete app templates

Visual design-time-experience

Radzen Blazor Studio

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

Demos Configuration

Premium Themes

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

Free Themes

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