UI Component Libraries

This section documents ASP.NET Core on .NET 10 (LTS), the current release — the minimal hosting model, the middleware pipeline, dependency injection, Minimal APIs, MVC & Razor Pages, Blazor with the current render modes, SignalR and gRPC, EF Core, ASP.NET Core Identity and policy-based authorization, output caching, rate limiting, and Native-AOT-aware building — as described by the official documentation at Microsoft Learn, which is the reference these pages are written and verified against.

This content was generated with the assistance of AI and should be verified against the official documentation before being relied on in production. .NET ships a major release every November and its APIs continue to evolve: the examples here target .NET 10 / C# 14.

This section’s bibliography lists the reference material consulted while preparing these pages.

This page covers how to style an ASP.NET Core UI and which ready-made component libraries to reach for. Free and open-source options come first, in rough order of adoption; commercial suites are listed last, without examples.

Styling options

Bootstrap

The MVC, Razor Pages, and Blazor templates ship Bootstrap in wwwroot/lib/bootstrap. Manage the version with LibMan (libman.json) or npm. Cross-link: the Bootstrap Reference.

// libman.json
{ "defaultProvider": "cdnjs",
  "libraries": [ { "library": "bootstrap@5.3.3", "destination": "wwwroot/lib/bootstrap/" } ] }

Tailwind CSS

Install Tailwind CSS with the standalone CLI (no Node) or a Node build, then use utility classes directly in .cshtml / .razor.

tailwindcss -i ./Styles/app.css -o ./wwwroot/css/app.css --watch

<button class="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">Save</button>

Sass

Add AspNetCore.SassCompiler and it compiles .scss on build and watch. Cross-link: the Sass Reference.

dotnet add package AspNetCore.SassCompiler

Blazor CSS isolation

A Component.razor.css file is scoped to that component: the build rewrites its selectors and adds a b-<hash> attribute so rules do not leak. Use ::deep to reach child markup, and put global rules in wwwroot/app.css.

/* Counter.razor.css */
button { font-weight: 600; }
::deep .badge { color: rebeccapurple; }

Tag Helpers style server-rendered MVC/Razor Pages markup; Razor component libraries (below) target Blazor. See Razor class libraries and CSS isolation.

Blazor component libraries — free and open-source

MudBlazor (MIT)

MudBlazor is a Material Design component set and the most widely used open-source Blazor library.

dotnet add package MudBlazor

@* Program.cs: builder.Services.AddMudServices(); *@
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="Save">Save</MudButton>
<MudDialog @bind-Visible="open">Confirm?</MudDialog>
<MudDataGrid Items="@products" />

Radzen Blazor Components (MIT)

Radzen Blazor Components is a free set of ~90 components including RadzenDataGrid. Radzen Blazor Studio (the visual designer) is a separate paid product; the components themselves are free.

dotnet add package Radzen.Blazor

@* Program.cs: builder.Services.AddRadzenComponents(); *@
<RadzenButton Text="Save" Click="@Save" />
<RadzenDialog />
<RadzenDataGrid Data="@products" TItem="Product" />

Blazorise (Apache-2.0 core)

Blazorise renders through a provider you choose — Bootstrap, Bulma, Tailwind, Material, or AntDesign. The core is Apache-2.0; a few advanced extensions are licensed.

<Button Color="Color.Primary" Clicked="@Save">Save</Button>
<Modal @ref="modal"><ModalContent>Confirm?</ModalContent></Modal>
<DataGrid TItem="Product" Data="@products" />

Microsoft Fluent UI Blazor (MIT)

Microsoft Fluent UI Blazor (Microsoft.FluentUI.AspNetCore.Components) implements the Fluent 2 design system, is maintained by Microsoft, and powers the .NET Aspire dashboard.

@* Program.cs: builder.Services.AddFluentUIComponents(); *@
<FluentButton Appearance="Appearance.Accent" @onclick="Save">Save</FluentButton>
<FluentDialog @bind-Hidden="hidden">Confirm?</FluentDialog>
<FluentDataGrid Items="@products.AsQueryable()" />

Ant Design Blazor (MIT)

Ant Design Blazor is an enterprise-oriented Ant Design port with a rich Table and Form.

<Button Type="@ButtonType.Primary" OnClick="Save">Save</Button>
<Modal Title="Confirm" @bind-Visible="visible">Delete this item?</Modal>
<Table TItem="Product" DataSource="@products" />

HAVIT Blazor (MIT) and Blazor Bootstrap (Apache-2.0)

HAVIT Blazor and Blazor Bootstrap are Bootstrap 5 component sets (Blazor Bootstrap also has charts). Cross-link: the Bootstrap Reference.

<Button Color="ButtonColor.Primary" @onclick="Save">Save</Button>
<Modal @ref="modal" Title="Confirm" />
<Grid TItem="Product" Data="@products" />

MatBlazor (MIT)

MatBlazor is a Material component set; note it is less actively maintained than MudBlazor.

<MatButton Raised="true" OnClick="Save">Save</MatButton>
<MatDialog @bind-IsOpen="open">Confirm?</MatDialog>
<MatTable Items="@products" />

Server-rendered (MVC / Razor Pages) UI

Server-rendered UI is mostly Bootstrap + Tailwind + custom Tag Helpers — there is no large open-source "component suite" for it the way there is for Blazor. The richer grid/scheduler/pivot kits for MVC and Razor Pages come from the commercial vendors below.

Commercial suites — paid / licensed

Listed last, without examples. Some offer a free community licence for individuals or small teams under a revenue threshold.

Accessibility

A component library gives you accessible primitives, but you still own the wiring: label every control, manage focus in dialogs and menus, honour prefers-reduced-motion, and test with a keyboard and a screen reader. Cross-link: Web Accessibility.