Welcome!

The Fluent UI Blazor library provides a robust and extensive set of Razor components for Blazor applications. Some of those components are wrappers around Microsoft's official Fluent UI Web Components. Others are components that leverage the Fluent Design System or just make it easier to work with Fluent in general.

To get up and running with the Microsoft.FluentUI.AspNetCore.Components library, see the "Getting Started" section below.

Introduction and getting started video

More videos available on our videos page.

Latest releases

• Jul

  16
  v4.12.1 released
• Jun

  6
  v4.12.0 released
• May

  8
  v4.11.9 released
• Apr

  11
  v4.11.8 released

If you are already up-and-running and are upgrading from an earlier version of the library, please click one of the release announcements above for important information on additions, fixes and (breaking) changes.

Latest video

• Nov

  15
  Our .NET Conf 2024 session on YouTube

Getting Started

By far the easiest way to get started is by using our templates. Setting them up is quick and easy. See the templates page for instructions and usage.

Manual setup

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 components. You can use the NuGet package manager in your IDE for that or use the following command when using a CLI:

dotnet add package Microsoft.FluentUI.AspNetCore.Components

Refer to the code setup document to learn what else needs done to get up-and-running. This includes adding code to the Program.cs file so all necessary services are available and setup in the correct way.

Scripts

As mentioned, we wrap the Fluent UI Web Components for some of our components. The needed script is included in the library and will be loaded for you automatically by using Blazor's built-in capabilities. You do not need to download or pull the script from a CDN manually.

Please refer to the script section on the Code setup page for information on how to manually add the script to your pages (which should normally not be necessary).

Styles

In order for this library to work as expected, it expects the composed scoped CSS file to be loaded. When using our templates, this will already be set up.

Please refer to the styles section on the Code setup page for more information on:

• Manually adding the style link
• Our Reboot.css file
• Possible configuration steps needed when combining the library with other CSS frameworks (like Tailwind)

Using the Fluent UI Blazor library

With the package installed, you can begin using the components from the Fluent UI Blazor library in the same way as any other Razor component. Just be sure to add the following using statement to your views:

@using Microsoft.FluentUI.AspNetCore.Components

Tip

You can add @using Microsoft.FluentUI.AspNetCore.Components. to the namespace collection in _Imports.razor, so you don't have to add it to every razor page that uses one of the components.

Simple components example

@using Microsoft.FluentUI.AspNetCore.Components.

<FluentCard Width="350px" Height="250px">
    <h2>Hello World!</h2>
    <FluentButton Appearance="@Appearance.Accent">Click Me</FluentButton>
</FluentCard>
                

Components & render modes

As described in the Blazor documentation:

By default, components use Static Server-side rendering (SSR). The component renders to the response stream and there is no interactivity.

A component inherits its render mode from its parent. So unless a render mode is specified on the app, page or component level, every component (including ours) is statically rendered on the server and will not be interactive. For the Fluent UI Blazor library this means most components will display correctly but will not offer complete, if any, functionality.

Configuring the Design System

The Fluent UI Razor components are using FAST's Adaptive UI technology, which enables design customization and personalization, while automatically maintaining accessibility. This is accomplished through setting various "Design Tokens".

The library exposes all of the available Design Tokens, which you can use both from code as in a declarative way in your .razor pages. The different ways of working with design tokens are described on the design tokens page.

Support

The Microsoft Fluent UI Blazor library is an open-source project. The source code (including this demo site) is hosted in the fluentui-blazor repository at GitHub.

The library is not an official part of ASP.NET Core. This means the packages are not officially supported and we are not committed to shipping updates as part of any official .NET updates. It is built and maintained by Microsoft employees (and external contributors) and offers support, like most other open-source projects, on a best effort base through the GitHub repository only. No support is offered through any of Microsoft's official support channels.

Joining the Community

Looking to get answers to questions or engage with us in real-time?

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

We look forward to building an amazing open source community with you!