microsoft/fluentui-blazor

microsoft/fluentui-blazor

Description: Microsoft Fluent UI Blazor components library. For use with ASP.NET Core Blazor applications

Language: C#

License: MIT

Stars: 4760

Forks: 467

Open issues: 42

Created: 2021-03-15T21:48:18Z

Pushed: 2026-06-11T17:28:25Z

Default branch: dev

Fork: no

Archived: no

README:

Microsoft Fluent UI Blazor library

> ## Reporting an issue? > Please supply us with ready-to-run reproduction code in the form of something we can copy/paste, a (zipped) project structure or a GitHub repository. > > We do not have capacity to craft or compose a reproduction for every issue that gets raised. > > If no code or repository is provided, the issues will be closed after 3 days. > > Help us to help you. Thanks. > > With 💖, the Fluent UI crew.

Demo

Explore the Demo: visit https://www.fluentui-blazor.net to kickstart your first project, browse the documentation, and test all components live. If you encounter any problems, you can use the backup site.

---

:star: We appreciate your star, it helps!

This package is for use in .NET 8 and 9 Blazor projects. If you are using now unsupported .NET 6 or 7, please use the v3 version of the packages (names starting with Microsoft.Fast.Components.FluentUI)

Introduction

The Microsoft.FluentUI.AspNetCore.* family of packages provides a set of Razor components for building Blazor applications that leverage the Fluent Design System (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. 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.

Getting Started

Using our dotnet templates

The easiest way to get started is by using our Templates. These mimic the regular Blazor templates and come with the design and components pre-configured. You install them with this command:

dotnet new install Microsoft.FluentUI.AspNetCore.Templates

Navigate to a folder where you want to create your new project and run the following command to create a new project.

dotnet new fluentblazor --name MyApplication

If you want to create a new standalone WebAssembly project, you can use the following command:

dotnet new fluentblazorwasm --name MyApplication

Other available templates are:

• Fluent .NET Aspire Starter App (fluentaspire-starter)
• Fluent .NET MAUI Blazor Hybrid and Web App (fluentmaui-blazor-web)

When using Visual Studio, you can also use the New Project dialog to create a new project. The templates can be found by typine Fluent in the search field.

Manual Install

To start using the Fluent UI Blazor library from scratch, you first need to install the main NuGet package in the project you want to use the library and its components. You can use the NuGet package manager in your IDE or use the following command when using a CLI:

dotnet add package Microsoft.FluentUI.AspNetCore.Components

If you want to extend the functionality of the library with icons or emoji, you can install additional packages for that:

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

Script

As mentioned, we wrap the Fluent UI Web Components which are implemented in a script file. This file is included in the library itself and does not have to be downloaded or pulled from a CDN.

> By including the script in the library we can safeguard that you are always using the best matching script version.

Even when using SSR (Static Server Rendering), the script will be included and loaded automatically. If you want the script to be loaded before Blazor starts, add it to your App.razor file like this:

If you add interactivity later, the Blazor script will kick in and try to load the web component script again but JavaScript will handle that gracefully by design.

Reboot (optional)

Reboot is a collection of element-specific CSS changes in a single file to help kick-start building a site with the Fluent UI Blazor components. It provides an elegant, consistent, and simple baseline to build upon.

If you want to use Reboot, you'll need to add to your app.razor, index.html or _Layout.cshtml file a line that includes the stylesheet (.css file). This can be done by adding the following line to the `` section:

When using the templates to create your application, Reboot is already set-up for you.

_When creating a site that is hosted in a different base path,it might be necessary to remove the leading '/' from the stylesheet link._

Register Services

Add the following in Program.cs

builder.Services.AddFluentUIComponents();

If you're running your application on Blazor Server, make sure a default HttpClient is registered before the AddFluentUIComponents method.

builder.Services.AddHttpClient();

Add Component Providers

Add the following components at the end of your MainLayout.razor file. These providers are used by associated services to display Toasts, Dialog boxes, Tooltips or Message Bars correctly.

> note: You can remove providers which you are not using in your application.

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