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.
Radzen Blazor Components are distributed as the Radzen.Blazor nuget package.
You can add them to your project in one of the following ways
dotnet add package Radzen.Blazor
Open the _Imports.razor
file of your Blazor application and add these two lines @using Radzen
and @using Radzen.Blazor
.
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">
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>
Use any Radzen Blazor component by typing its tag name in a Blazor page e.g. <RadzenButton Text="Hi"></RadzenButton>
<RadzenButton Text="@text"></RadzenButton>
@code {
string text = "Hi";
}
<RadzenButton Click="@ButtonClicked" Text="Hi"></RadzenButton>
@code {
void ButtonClicked()
{
//
}
}
Open the Shared\MainLayout.razor
file and include:
<RadzenDialog/>
<RadzenNotification/>
<RadzenContextMenu/>
<RadzenTooltip/>
Open Startup.cs
file (Blazor Server before .NET 6) or Program.cs
(Blazor WebAssembly or Blazor Server after .NET 6) and add required services:
using Radzen;
...
public void ConfigureServices(IServiceCollection services)
{
...
services.AddRadzenComponents();
...
}
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();
}
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.
Source Code licensed under
MIT
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.