⭐ We appreciate your star, it helps!
Fluent UI Blazor is a component library for building Blazor applications with Microsoft's Fluent design language. It includes components based on the official Fluent UI Web Components as well as Blazor-specific components and services.
Important
This branch contains Fluent UI Blazor v5. See the v5 documentation and demos and the v4 to v5 migration guide.
If you'd like to view the code for version 4, navigate to the archive-v4 branch.
✅ UPDATE 2026-09-17: Active v5 development has moved from the old
dev-v5branch to thedevbranch. If your local repository previously useddev-v5branch, run the following commands from its folder to switch to and track the new active development branch:git fetch origin --prune git switch --track -c dev origin/dev git pull --ff-only origin dev
The Microsoft.FluentUI.AspNetCore.Components package provides a set of Blazor components
which are used to build applications that have a Fluent design
(i.e. have the look and feel of modern Microsoft applications).
Some of the components in the library are wrappers around Microsoft's official Fluent UI Web Components. Others are components that leverage the Fluent Design System or make it easier to work with Fluent UI. To get up and running with the library, see the Getting Started section below.
The source for the library is hosted in the fluentui-blazor repository at GitHub. Documentation on the components is available at the demo site.
If you are upgrading from an earlier version of the library, please see the what's new for information on (breaking) changes.
The template package provides ready-to-run Fluent UI versions of the standard Blazor templates:
- Fluent Blazor Web App
- Fluent Blazor WebAssembly Standalone App
- Fluent Aspire Starter App
- Fluent .NET MAUI Blazor Hybrid and Web App
Install the current v5 prerelease of the template package. Replace <VERSION> with the version shown on NuGet:
dotnet new install Microsoft.FluentUI.AspNetCore.Templates::<VERSION>Create a Blazor Web App or a standalone WebAssembly app:
dotnet new fluentblazor -o MyApplication
dotnet new fluentblazorwasm -o MyApplicationThe templates configure the packages, styles, services, providers, and icons for you. Run dotnet new list fluent to see all installed Fluent templates and their options.
dotnet add package Microsoft.FluentUI.AspNetCore.Components --prereleaseInstall the optional icons package when your application uses Fluent icons:
dotnet add package Microsoft.FluentUI.AspNetCore.Components.IconsDaily builds are also available. See Using the latest daily build before opting into them because they may contain breaking changes.
Add these namespaces to _Imports.razor:
@using Microsoft.FluentUI.AspNetCore.Components
@using Icons = Microsoft.FluentUI.AspNetCore.Components.IconsThe icons alias is only required when the icons package is installed.
Add the library stylesheet to the <head> of App.razor, index.html, _Layout.cshtml, or _Host.cshtml, depending on the application's hosting model:
<link href="_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.bundle.scp.css" rel="stylesheet" />Existing Bootstrap or other framework styles can be removed when they are no longer used.
In Program.cs:
builder.Services.AddFluentUIComponents();For a Blazor Web App using WebAssembly or Auto interactivity, register the services in both the server and client projects.
Add the provider component at the end of MainLayout.razor (or another top-level layout):
<FluentProviders />It hosts the providers required by services such as dialogs and tooltips.
Interactive Fluent components require an interactive Blazor render mode. Configure interactivity globally or apply a render mode to the page or component that needs it:
@rendermode InteractiveServerSee the ASP.NET Core Blazor render modes documentation for Server, WebAssembly, and Auto configuration.
Add this to an interactive Razor page:
<FluentStack Orientation="Orientation.Vertical">
<FluentButton Appearance="ButtonAppearance.Primary" OnClick="@IncrementCount">
Click me
</FluentButton>
<FluentLabel>Current count: @currentCount</FluentLabel>
</FluentStack>
@code {
private int currentCount;
private void IncrementCount()
{
currentCount++;
}
}We have additional packages available that include the complete Fluent UI System icons and Fluent UI Emoji collections. Please refer to the Icons and Emojis page for more information.
- The Microsoft Fluent UI Blazor components documentation and demo site
The Microsoft Fluent UI Blazor library is an open source project and is not an official part of ASP.NET Core, which means it’s not officially supported and isn’t committed to ship updates as part of any official .NET updates. Like with most other open source projects, support is offered on a best effort basis through the GitHub repository only.
We offer some guidelines on how you can get started contributing to the project. We also have a document that explains and shows how to write and develop unit tests
Looking to get answers to questions or engage with us in real-time? Our community is active on Gitter and Discord. Submit requests and issues on GitHub, or join us by contributing on some good first issues via GitHub.
We look forward to building an amazing open source community with you!