microsoft/fluentui-blazor

Analysis updated 2026-06-26

★ 4,726C#Audience · developerComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((FluentUI Blazor))
    Components
      Buttons and dialogs
      Data grids
      Navigation menus
    Design system
      Microsoft Fluent
      Microsoft 365 look
    Setup paths
      Project templates
      Existing project NuGet
      Optional icon packs
    Requirements
      .NET 8 or 9
      Blazor project

mindmap root((FluentUI Blazor)) Components Buttons and dialogs Data grids Navigation menus Design system Microsoft Fluent Microsoft 365 look Setup paths Project templates Existing project NuGet Optional icon packs Requirements .NET 8 or 9 Blazor project

Click or tap to explore — scroll the page freely

What do people build with it?

USE CASE 1

Add Microsoft 365-style buttons, dialogs, and data grids to a Blazor app without designing or coding them from scratch.

USE CASE 2

Start a new Blazor project with the Fluent design and all components wired up using the provided project template.

USE CASE 3

Browse the live demo site to see every component in action before deciding which ones to add to your project.

USE CASE 4

Add the optional icon or emoji packages to access Microsoft's full icon set inside your Blazor app.

What is it built with?

C#.NETBlazorHTMLCSS

How does it compare?

	microsoft/fluentui-blazor	zalo/mathutilities	thejoefin/text-grab
Stars	4,726	4,726	4,729
Language	C#	C#	C#
Setup difficulty	easy	easy	easy
Complexity	2/5	2/5	1/5
Audience	developer	developer	general

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 30min

Requires .NET 8 or 9, older .NET versions are not supported in the current release.

MIT, use freely for any purpose including commercial projects, keep the copyright notice.

In plain English

This library provides ready-made user interface components for building web applications with Blazor, Microsoft's framework for writing web apps in C# instead of JavaScript. The components follow Microsoft's Fluent Design System, which means they look and behave like modern Microsoft applications such as those in Microsoft 365. Developers can drop these components into a Blazor project to get buttons, dialogs, data grids, navigation menus, and other common interface elements without building them from scratch. Some components wrap Microsoft's existing Fluent UI Web Components, while others are designed specifically to fit Blazor's way of working. The easiest way to start is with the provided project templates. Running a single command creates a new project that already has the design and components wired up. Alternatively, developers can add the library as a standard package to an existing project. Optional add-on packages provide a large set of icons and emoji if needed. The library targets .NET 8 and 9. Older versions of .NET are not supported in the current release. A live demo site lets anyone browse all available components and try them interactively before using them in a project. Documentation lives on the same site. The project is maintained by Microsoft and is available under the MIT license.

Copy-paste prompts

Prompt 1

Show me the commands to create a new Blazor project using the fluentui-blazor project template so the design system is already configured.

Prompt 2

How do I add the Microsoft.FluentUI.AspNetCore.Components NuGet package to an existing Blazor Server project and get a FluentButton rendering on a page?

Prompt 3

Using fluentui-blazor, show me how to set up a FluentDataGrid component that displays a list of items fetched from a C# service.

Prompt 4

What is the difference between FluentUI Blazor components that wrap Fluent Web Components and those that are written natively for Blazor?

Prompt 5

How do I add the FluentUI icon package to my Blazor project and use a specific icon inside a button component?

Frequently asked questions

What is fluentui-blazor?

Ready-made buttons, data grids, dialogs, and navigation menus for Blazor web apps that look like Microsoft 365, drop in the NuGet package and get Microsoft Fluent Design components without building them yourself.

What language is fluentui-blazor written in?

Mainly C#. The stack also includes C#, .NET, Blazor.

What license does fluentui-blazor use?

MIT, use freely for any purpose including commercial projects, keep the copyright notice.

How hard is fluentui-blazor to set up?

Setup difficulty is rated easy, with roughly 30min to a first successful run.

Who is fluentui-blazor for?

Mainly developer.

Open on GitHub → Explain another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.