⭐ 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.

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-v5 branch to the dev branch. If your local repository previously used dev-v5 branch, 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 template package.

dotnet new install Microsoft.FluentUI.AspNetCore.Templates

Create a Blazor Web App or a standalone WebAssembly app:

dotnet new fluentuiblazor -o MyApplication
dotnet new fluentuiblazorwasm -o MyApplication

The 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

Install the optional icons package when your application uses Fluent icons:

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

Daily 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.Icons

The 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 InteractiveServer

See 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

• Fluent UI System Icons
• Fluent UI Emoji
• Entity Framework adapter for FluentDataGrid

• v5 documentation and component demos
• v4 documentation and component demos
• GitHub issues
• Discord community
• Contributing guide

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 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!

• Join the DotNetEvolution server and chat with us in real-time on Discord.
• Submit requests and issues (only) on GitHub.
• Contribute by helping out on some of our recommended first issues on GitHub.