Installation
This article shows you how to add Radzen Blazor components to your project.
Note
If you want to use the Radzen.Blazor components in Blazor .NET 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.
Install the Nuget package
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 package reference
<PackageReference Include="Radzen.Blazor" Version="*" />
Import the namespaces
Open the _Imports.razor
file of your Blazor application and add these two lines:
@using Radzen
@using Radzen.Blazor
Include the CSS and JS
Include CSS
Radzen Blazor components come with five free themes: Material, Standard, Default, Dark, Software and Humanistic.
To use a theme
- Pick a theme. The online demos allow you to preview the available options via the theme dropdown located in the header. The Material theme is currently selected by default.
- Include the theme CSS file in your Blazor application. Open
Pages\_Layout.cshtml
(Blazor Server .NET 6),Pages\_Host.cshtml
(Blazor Server .NET 7),wwwroot/index.html
(Blazor WebAssembly) orComponents\App.razor
(Blazor .NET 8) and include the 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">
Important
You will need to include also bootstrap CSS:
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
Include the 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>
Next steps
You are now ready to use Radzen Blazor components! Check Using a component to see how to add a Radzen Blazor component to your page.
Some components require additional setup: