Microsoft.FluentUI.AspNetCore.Components 5.0.0

Prefix Reserved

dotnet add package Microsoft.FluentUI.AspNetCore.Components --version 5.0.0

NuGet\Install-Package Microsoft.FluentUI.AspNetCore.Components -Version 5.0.0

This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.

<PackageReference Include="Microsoft.FluentUI.AspNetCore.Components" Version="5.0.0" />

For projects that support PackageReference, copy this XML node into the project file to reference the package.

<PackageVersion Include="Microsoft.FluentUI.AspNetCore.Components" Version="5.0.0" />
                    

                            Directory.Packages.props

<PackageReference Include="Microsoft.FluentUI.AspNetCore.Components" />
                    

                            Project file

For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package.

paket add Microsoft.FluentUI.AspNetCore.Components --version 5.0.0

The NuGet Team does not provide support for this client. Please contact its maintainers for support.

#r "nuget: Microsoft.FluentUI.AspNetCore.Components, 5.0.0"

#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.

#:package Microsoft.FluentUI.AspNetCore.Components@5.0.0

#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package.

#addin nuget:?package=Microsoft.FluentUI.AspNetCore.Components&version=5.0.0
                    

                            Install as a Cake Addin

#tool nuget:?package=Microsoft.FluentUI.AspNetCore.Components&version=5.0.0
                    

                            Install as a Cake Tool

The NuGet Team does not provide support for this client. Please contact its maintainers for support.

Microsoft Fluent UI Blazor components

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

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

Introduction

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.

Upgrading from an earlier version

If you are upgrading from an earlier version of the library, please see the what's new for information on (breaking) changes.

Create a project from a template

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

Create a project manually

1. Install the packages

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

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.

2. Add the imports

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.

3. Add the component styles

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.

4. Register the services

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.

5. Add the providers

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.

6. Enable interactivity

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.

Verify the installation

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++;
  }
}

Working with Icons and Emoji

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.

Additional resources

The Microsoft Fluent UI Blazor components documentation and demo site

Additional packages

Documentation and support

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.

Contributing to the project

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

Joining the Community

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!

Contact

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

Product	Compatible and additional computed target framework versions.
.NET	net8.0 is compatible. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. net9.0 is compatible. net9.0-android was computed. net9.0-browser was computed. net9.0-ios was computed. net9.0-maccatalyst was computed. net9.0-macos was computed. net9.0-tvos was computed. net9.0-windows was computed. net10.0 is compatible. net10.0-android was computed. net10.0-browser was computed. net10.0-ios was computed. net10.0-maccatalyst was computed. net10.0-macos was computed. net10.0-tvos was computed. net10.0-windows was computed. net11.0 is compatible.

Product

.NET

Compatible target framework(s)

Included target framework(s) (in package)

Learn more about Target Frameworks and .NET Standard.

net10.0
- Microsoft.AspNetCore.Components.Web (>= 10.0.12)
- Microsoft.Extensions.Http (>= 10.0.12)
net11.0
- Microsoft.AspNetCore.Components.Web (>= 11.0.0-rc.1.26425.128)
- Microsoft.Extensions.Http (>= 11.0.0-rc.1.26425.128)
net8.0
- Microsoft.AspNetCore.Components.Web (>= 8.0.31)
- Microsoft.Extensions.Http (>= 8.0.1)
net9.0
- Microsoft.AspNetCore.Components.Web (>= 9.0.20)
- Microsoft.Extensions.Http (>= 9.0.20)

NuGet packages (97)

Showing the top 5 NuGet packages that depend on Microsoft.FluentUI.AspNetCore.Components:

Package	Downloads
Microsoft.FluentUI.AspNetCore.Components.Icons A Blazor wrapper library for the official Microsoft Fluent UI System Icons library.	2.6M
Microsoft.FluentUI.AspNetCore.Components.Emoji A Blazor wrapper library for the official Microsoft Fluent UI Emoji set.	526.6K
Microsoft.FluentUI.AspNetCore.Components.DataGrid.EntityFrameworkAdapter An adapter for using the Fluent UI Blazor DataGrid with Entity Framework.	293.0K
FenixAlliance.ABS.SDK Application Component for the Alliance Business Suite.	147.9K
Hexalith.Infrastructure.ClientApp Hexalith is a set of libraries to build a micro-service architecture.	50.5K

GitHub repositories (9)

Showing the top 9 popular GitHub repositories that depend on Microsoft.FluentUI.AspNetCore.Components:

Repository	Stars
microsoft/aspire Aspire is the tool for code-first, extensible, observable dev and deploy.	6.3K
testcontainers/testcontainers-dotnet A library to support tests with throwaway instances of Docker containers for all compatible .NET Standard versions.	4.4K
microsoft/AzUrlShortener A simple and easy Url Shortener	587
JasonBock/Rocks A mocking library based on the Compiler APIs (Roslyn + Mocks)	392
BlazorStatic/BlazorStatic Harness the power of Blazor to craft static websites.	249
mobitouchOS/MaIN.NET NuGet package designed to make LLMs, RAG, and Agents first-class citizens in .NET	198
jjonescz/DotNetLab C# and Razor compiler playground in the browser via Blazor WebAssembly	155
BSData/phalanx Project Phalanx is a roster editor handling BattleScribe datafiles	152
XuanchenLin/WinFormedge An open source library based on Microsoft WebView2 that can buid powerful WinForm applications with HTML, CSS and JavaScript easily.	110

Version	Downloads	Last Updated
5.0.0	0	9/25/2026
5.0.0-rc.5-26219.1	25,017	8/9/2026
5.0.0-rc.4-26180.1	26,958	6/29/2026
5.0.0-rc.3-26138.1	7,750	5/19/2026
5.0.0-rc.2-26098.1	5,937	4/8/2026
5.0.0-rc.1-26048.1	3,566	2/17/2026
4.14.4	189,483	7/30/2026
4.14.3	106,573	6/23/2026
4.14.2	300,815	5/18/2026
4.14.1	116,707	4/22/2026
4.14.0	355,002	2/13/2026
4.13.2	228,259	11/27/2025
4.13.1	70,221	10/30/2025
4.13.0	47,540	10/10/2025
4.12.1	205,291	7/16/2025
4.12.0	441,892	6/6/2025
4.11.9	136,520	5/8/2025
4.11.8	87,786	4/11/2025
4.11.7	55,658	3/19/2025