raise-blazor

name	raise-blazor
description	USE FOR: Building Blazor applications with Radzen Blazor components, including DataGrid, Form, Scheduler, and Chart. Use when you need a free, open-source component library with an optional Radzen IDE for rapid application development. DO NOT USE FOR: Non-Blazor projects, native mobile or desktop apps (use MAUI or Avalonia), or projects that require deep integration with a specific CSS framework other than Radzen's built-in theme system.
license	MIT
metadata	{"displayName":"Radzen Blazor Components","author":"Tyler-R-Kendrick","version":"1.0.0"}
compatibility	["claude","copilot","cursor"]
references	[{"title":"Radzen Blazor Components Official Site","url":"https://blazor.radzen.com/"},{"title":"Radzen Blazor GitHub Repository","url":"https://github.com/radzenhq/radzen-blazor"},{"title":"Radzen.Blazor NuGet Package","url":"https://www.nuget.org/packages/Radzen.Blazor"}]

Radzen Blazor Components

Overview

Radzen Blazor Components is a free, open-source library of 90+ Blazor components including DataGrid, Scheduler, Chart, Form, Dialog, and Notification. The library provides its own design system with multiple built-in themes (Material, Standard, Dark, Humanistic) and does not depend on Bootstrap or other CSS frameworks. Radzen components support Blazor Server, Blazor WebAssembly, and .NET 8+ SSR with per-component interactivity. The optional Radzen IDE provides visual CRUD page generation, but the component library works standalone via NuGet.

Installation and Service Registration

Install the Radzen.Blazor NuGet package and register services in Program.cs.

using Radzen;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

// Register Radzen services
builder.Services.AddScoped<DialogService>();
builder.Services.AddScoped<NotificationService>();
builder.Services.AddScoped<TooltipService>();
builder.Services.AddScoped<ContextMenuService>();

var app = builder.Build();

app.UseStaticFiles();
app.UseAntiforgery();
app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

app.Run();

DataGrid with Server-Side Loading

The RadzenDataGrid component provides sorting, filtering, grouping, and virtual scrolling. Use LoadData for server-side operations.

@page "/invoices"
@using Radzen
@using Radzen.Blazor
@inject IInvoiceService InvoiceService

<RadzenDataGrid @ref="_grid"
                Data="_invoices"
                Count="_count"
                LoadData="OnLoadData"
                TItem="Invoice"
                AllowSorting="true"
                AllowFiltering="true"
                AllowPaging="true"
                PageSize="20"
                PagerHorizontalAlign="HorizontalAlign.Center"
                FilterMode="FilterMode.Advanced"
                Style="height: 600px">

    <Columns>
        <RadzenDataGridColumn TItem="Invoice" Property="InvoiceNumber"
                              Title="Invoice #" Width="140px" />
        <RadzenDataGridColumn TItem="Invoice" Property="CustomerName"
                              Title="Customer" Width="200px" />
        <RadzenDataGridColumn TItem="Invoice" Property="Amount"
                              Title="Amount" FormatString="{0:C2}" Width="120px" />
        <RadzenDataGridColumn TItem="Invoice" Property="DueDate"
                              Title="Due Date" FormatString="{0:d}" Width="130px" />
        <RadzenDataGridColumn TItem="Invoice" Property="Status" Title="Status" Width="120px">
            <Template Context="invoice">
                <RadzenBadge BadgeStyle="@GetBadgeStyle(invoice.Status)"
                             Text="@invoice.Status" />
            </Template>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn TItem= Filterable= Sortable= Width=>
            <Template Context=>
                <RadzenButton Icon= ButtonStyle= Size=
                              Click= />
                <RadzenButton Icon= ButtonStyle= Size=
                              Click= />
            </Template>
        </RadzenDataGridColumn>
    </Columns>
</RadzenDataGrid>

@code {
     RadzenDataGrid<Invoice> _grid = !;
     IEnumerable<Invoice>? _invoices;
      _count;

    
    {
         result =  InvoiceService.GetPagedAsync(
            filter: .Filter,
            orderBy: .OrderBy,
            skip: .Skip ?? ,
            top: .Top ?? );

        _invoices = result.Items;
        _count = result.TotalCount;
    }

     => status 
    {
         => BadgeStyle.Success,
         => BadgeStyle.Danger,
         => BadgeStyle.Warning,
        _ => BadgeStyle.Light
    };

     {  }
     {  }
}

Forms with Validation

Radzen provides form components with built-in validators that render inline error messages.

@page "/contacts/new"
@using Radzen
@using Radzen.Blazor
@inject NavigationManager Navigation
@inject IContactService ContactService
@inject NotificationService NotificationService

<RadzenTemplateForm TItem="ContactModel" Data="_model" Submit="HandleSubmit">
    <RadzenFieldset Text="New Contact">
        <RadzenStack Gap="1rem">
            <RadzenFormField Text="Full Name" Variant="Variant.Outlined">
                <ChildContent>
                    <RadzenTextBox @bind-Value="_model.FullName" Name="FullName" />
                </ChildContent>
                <Helper>
                    <RadzenRequiredValidator Component="FullName" Text="Name is required" />
                </Helper>
            </RadzenFormField>

            <RadzenFormField Text="Email" Variant="Variant.Outlined">
                <ChildContent>
                    <RadzenTextBox @bind-Value="_model.Email" Name="Email" />
                </ChildContent>
                <Helper>
                    <RadzenRequiredValidator Component="Email" Text="Email is required" />
                    <RadzenEmailValidator Component="Email" Text="Invalid email format" />
                </Helper>
            </RadzenFormField>

            <RadzenFormField Text="Phone" Variant="Variant.Outlined">
                <ChildContent>
                    <RadzenMask @bind-Value="_model.Phone" Mask="(***) ***-****"
                                Placeholder="[phone]" Name="Phone" />
                </ChildContent>
            </RadzenFormField>

            <RadzenFormField Text="Category" Variant="Variant.Outlined">
                <ChildContent>
                    <RadzenDropDown @bind-Value="_model.Category" Data="_categories"
                                   Name= Placeholder= />
                </ChildContent>
                <Helper>
                    <RadzenRequiredValidator Component= Text= />
                </Helper>
            </RadzenFormField>

            <RadzenButton ButtonType= Text=
                          ButtonStyle= />
        </RadzenStack>
    </RadzenFieldset>
</RadzenTemplateForm>

@code {
     ContactModel _model = ();
      List<> _categories = () { , , ,  };

    
    {
         ContactService.CreateAsync(_model);
        NotificationService.Notify(NotificationSeverity.Success, , );
        Navigation.NavigateTo();
    }

      
    {
          FullName { ; ; } = .Empty;
          Email { ; ; } = .Empty;
          Phone { ; ; } = .Empty;
          Category { ; ; } = .Empty;
    }
}

Dialog Service

Use DialogService to open components as modal dialogs and receive results.

@inject DialogService DialogService

// Open a component as a dialog
private async Task OpenEditDialog(Invoice invoice)
{
    var result = await DialogService.OpenAsync<InvoiceEditDialog>(
        "Edit Invoice",
        new Dictionary<string, object> { { "Invoice", invoice } },
        new DialogOptions
        {
            Width = "600px",
            Height = "500px",
            Resizable = true,
            Draggable = true,
            CloseDialogOnOverlayClick = false
        });

    if (result is true)
    {
        await _grid.Reload();
    }
}

Radzen vs Other Free Blazor Libraries

Feature	Radzen	MudBlazor	Blazorise (free)	Ant Design Blazor
Component count	90+	60+	50+ (free tier)	60+
Built-in themes	5	3	Via provider	1
DataGrid	Full-featured	Full-featured	Basic	Full-featured
Scheduler	Yes	No	No	No
Dialog service	Yes	Yes	Yes	Yes
Form validators	Component-based	EditForm-based	Component-based	EditForm-based
Visual IDE	Radzen IDE (optional)	No	No	No

Best Practices

1. Use LoadData with LoadDataArgs.Filter and LoadDataArgs.OrderBy for all DataGrids displaying server-sourced data and translate the OData-style filter string to your data layer using System.Linq.Dynamic.Core, avoiding loading the full dataset into memory just to support client-side filtering.

2. Register DialogService, NotificationService, TooltipService, and ContextMenuService as Scoped in Program.cs and add the corresponding <RadzenDialog />, <RadzenNotification />, <RadzenTooltip />, and <RadzenContextMenu /> components in MainLayout.razor, not in individual pages; missing these root components causes silent failures when services are injected.

3. Use RadzenTemplateForm<T> with component-specific validators (RadzenRequiredValidator, RadzenEmailValidator) rather than EditForm with DataAnnotationsValidator, because Radzen's validators render inline within RadzenFormField helper slots and integrate with the Radzen theme; mixing EditForm and Radzen components produces misaligned validation messages.

4. Set explicit Width on each RadzenDataGridColumn for fixed-content columns (IDs, dates, status badges, action buttons) and leave one primary text column without width to fill remaining space, preventing horizontal scrollbar appearance and content overflow on narrow viewports.

5. Use FormatString on RadzenDataGridColumn for date and numeric formatting (e.g., "{0:C2}", "{0:d}") instead of a <Template> with inline formatting, because FormatString is applied consistently in export, clipboard copy, and print operations.

6. Configure FilterMode.Advanced on DataGrid for multi-condition filtering and FilterMode.Simple for search-box-style filtering; Advanced mode generates proper OData filter expressions that can be passed directly to server queries without custom parsing.