Fluent UI Blazor v5: Microsoft's component library for ASP.NET Core Blazor

The gap Fluent UI Blazor fills for ASP.NET Core teams

Microsoft's Fluent design language is distributed as Fluent UI Web Components, which are custom elements. A Blazor developer can use those elements directly, but then every dialog, tooltip, data grid and icon has to be wired by hand: JavaScript interop for imperative APIs, cascading values for theming, and C# wrappers so the markup stays typed. Fluent UI Blazor does that wiring. The README describes the package as "a set of Blazor components which are used to build applications that have a Fluent design", with some components wrapping the official web components and others built specifically for Blazor. The audience is narrow and clear: teams already on ASP.NET Core Blazor who want the look of modern Microsoft applications without leaving C#. If your front end is React, Vue or plain Razor Pages, this library is not the shortest path; the underlying web components are.

What sits inside the package: wrappers, services and providers

The architecture is layered. At the bottom are the official Fluent UI Web Components. Above them, the library exposes Razor components such as FluentButton, FluentStack, FluentLabel and FluentDataGrid. Above that again sits a service layer registered through dependency injection, plus a provider component that the README says "hosts the providers required by services such as dialogs and tooltips". That layering explains the two-step setup most people trip over. Registering AddFluentUIComponents is not enough on its own; without FluentProviders in a top-level layout, dialog and tooltip services have nothing to render into. Interactivity is the third constraint. The README states that interactive Fluent components require an interactive Blazor render mode, applied globally or per page with @rendermode InteractiveServer. A statically rendered page can display a button but will not run its OnClick handler. The library also ships optional satellite packages: Icons, Emoji, and an Entity Framework adapter for FluentDataGrid.

Installing Fluent UI Blazor v5 and rendering a first component

The fastest route is the template package, which the README says configures "the packages, styles, services, providers, and icons for you". Replace <VERSION> with the version shown on NuGet, because the v5 templates are prerelease.

dotnet new install Microsoft.FluentUI.AspNetCore.Templates::<VERSION>
dotnet new fluentblazor -o MyApplication

Run dotnet new list fluent to see every installed Fluent template and its options, including the standalone WebAssembly, Aspire and MAUI Hybrid variants. For an existing project, add the packages and register the services.

dotnet add package Microsoft.FluentUI.AspNetCore.Components --prerelease
dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons

builder.Services.AddFluentUIComponents();

Then add the stylesheet link to the head of App.razor, index.html, _Layout.cshtml or _Host.cshtml depending on the hosting model, add the two @using lines to _Imports.razor, and place <FluentProviders /> at the end of MainLayout.razor. The README's verification snippet is a counter: a FluentButton with Appearance="ButtonAppearance.Primary" and an OnClick handler, a FluentLabel bound to currentCount, both inside a FluentStack with Orientation="Orientation.Vertical". If the button renders but the count never changes, the render mode is the first thing to check, not the component.

Where the v5 story gets uncomfortable

This is not a library you install once and forget. The default branch, dev, now carries v5, and the README notes that active v5 development moved there from dev-v5 on 2026-09-17, with git fetch origin --prune and git switch --track -c dev origin/dev for anyone tracking the old branch. Version 4 lives on the archive-v4 branch. The latest listed release is v4.14.4 from 2026-07-29, so the release line you can pin today is v4 while v5 is documented on a separate site and comes with its own migration guide. The manual install command uses --prerelease. That combination means a team that wants v5 is adopting prerelease packages and following a moving branch. The README also warns that daily builds "may contain breaking changes". Neither the README nor the release list documents a rollback path from v5 to v4 beyond switching branches and packages, so treat the migration as one-way until you have verified it yourself. None of this is unusual for a component library mid-major-version, but it should decide whether you start now.

Fluent UI Blazor or MudBlazor: two different bets

The comparison people search for is MudBlazor, and the difference is not cosmetic. MudBlazor is a self-contained Material Design component set written in C#: its components render their own markup and CSS, and it does not depend on a vendor's web component runtime. Fluent UI Blazor deliberately sits on top of Microsoft's Fluent UI Web Components, so the visual output tracks Microsoft's design system, and the library inherits both the fidelity and the constraints of that layer, including the provider and render-mode requirements described above. If your product needs to look like Microsoft 365, the wrapper approach is the point. If you want a component library that stands alone with no web component dependency and no vendor design language attached, MudBlazor is the more direct choice. The same reasoning applies against hand-rolling: writing your own wrappers is viable, and it is roughly the work this project has already done.

Licence, maintenance and the cost of upgrading

The repository is MIT licensed, and the README carries the MIT badge; that is permissive and imposes no copyleft obligation on your application, though the repository also ships a THIRD-PARTY-NOTICES.TXT, so the bundled dependencies have their own terms worth reading before you redistribute. This is not legal advice. On maintenance, the last push to the repository was on 2026-09-22, one day before this writing, and the repository is not archived, so work is ongoing. The cost that matters is upgrade cost, not maintenance risk. A major version is in flight, the v4 code sits on a separate branch, and the README points to a what's new page for breaking changes on every upgrade. Budget for reading that page each time you bump the package, and for re-testing any FluentDataGrid or dialog code, since those sit on the service and provider layers that changed between versions.

Editorial conclusion

Adopt Fluent UI Blazor v5 when your team already ships Blazor and wants Microsoft's design language without hand-writing wrappers over the web components. Stay on v4, or pick a library with a stable v5 line, if you cannot absorb prerelease packages and a migration guide. Before committing, run dotnet new install Microsoft.FluentUI.AspNetCore.Templates::<VERSION> on a throwaway project, check that AddFluentUIComponents and FluentProviders are wired in both server and client projects under WebAssembly or Auto interactivity, and read the v4 to v5 migration guide for every component you already use.

Frequently asked questions

Official sources

1. License: MIT
2. microsoft/fluentui-blazor on GitHub
3. Project website
4. README
5. Releases