DOCSEARCHbyAlgolia
Submit Docs

Radzen Blazor Components Documentation

repository·master·Indexed 26 days ago

https://github.com/radzenhq/radzen-blazor

An MIT-licensed UI component library for Blazor applications featuring over 145 native components for data visualization, forms, layout, and navigation. Supports .NET 10, Blazor Server, Blazor WebAssembly, and .NET MAUI Blazor Hybrid.

Tokens
764
Snippets
1
Records
3
Agent score
38%

What's inside Radzen Blazor Components

  1. Overview of Radzen Blazor Components

    master

    Radzen Blazor Components is a library of over 145 native Blazor components. It is MIT licensed and supports .NET 10, Blazor Server, Blazor WebAssembly, and .NET MAUI Blazor Hybrid.

    Components are categorized into several functional groups:

    • AI: AIChat, Chat, Markdown, SpeechToTextButton
    • Data: DataGrid, DataList, PivotDataGrid, DataFilter, PickList, Pager, Tree, Scheduler, Gantt, Timeline, Spreadsheet, various Charts (Line, Bar, Pie, etc.), Heatmap, Treemap, etc.
    • Forms: TextBox, TextArea, Password, Numeric, Mask, DatePicker, Dropdown, AutoComplete, CheckBox, RadioButtonList, Switch, Slider, FileInput, etc.
    • Layout: Card, Panel, Tabs, Accordion, Splitter, Tile Layout, Steps, Dialog, Fieldset, Stack, Row/Column, Sidebar, Carousel
    • Navigation: Menu, ContextMenu, PanelMenu, Breadcrumb, Link, TreeView, FabMenu, ProfileMenu
    • Feedback: Notification, Alert, ProgressBar, Badge, Tooltip, Skeleton, Chip, AppearanceToggle
    • Utility: QRCode, Barcode, Gravatar, GoogleMap, DropZone

    Themes include 10 built-in options with light/dark variants. Free themes include Material, Standard, Default, Humanistic, and Software. Premium themes include Material 3 and Fluent.

  2. Quick start with Radzen Blazor Components

    master

    To integrate Radzen Blazor Components into your project, follow these four steps:

    1. Install the NuGet package using the .NET CLI.
    2. Add namespaces to your _Imports.razor file.
    3. Add the theme and JavaScript assets to your App.razor file (the theme goes in the <head> and the script after the last <script> tag).
    4. Register the services in your Program.cs file.

    Once configured, you can use components like <RadzenButton /> in your Razor files.

    # 1. Install the NuGet package
dotnet add package Radzen.Blazor
    // 2. Add to _Imports.razor
@using Radzen
@using Radzen.Blazor
    <!-- 3. Add to App.razor -->
<!-- inside <head> -->
<RadzenTheme Theme="material" />

<!-- after the last <script> -->
<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
    // 4. Register services in Program.cs
builder.Services.AddRadzenComponents();
    // Use a component
<RadzenButton Text="Hello World" Click="@OnClick" />

  3. Run Radzen Blazor demos locally

    master

    To run the official Radzen Blazor demos on your local machine, you can use one of the following solutions depending on your target hosting model:

    • Blazor Server: Open Radzen.Server.sln.
    • Blazor WebAssembly: Open Radzen.WebAssembly.sln.

    Requirements:

    • .NET 10 SDK
    • Visual Studio 2026 (preferred)