Welcome!

The Fluent UI Blazor library provides a robust and extensive set of Blazor components. 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

Fluent UI Blazor introduction video

More videos available on our videos page.

This is the demo and documentation site for version 4.11.6 of the library. This version supports both .NET 8 and .NET 9. Versions before v4.10.0 only support .NET 8.


The demo and documentation sites for previous version is available:
Version 3.8.0
Please be aware that this version is no longer supported as both .NET 6 and .NET 7 are out of support now.

Latest releases

If you are already up-and-running and upgrading from an earlier version of the library, please go to the What's new page for information on additions, fixes and (breaking) changes.

Latest video

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 components 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 compnents. 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 infomation 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 components

With the package installed, you can begin using the Fluent UI Blazor components in the same way as any other Blazor 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

Here's a small example of a FluentCard with a FluentButton (which does not do anything) that uses Fluent's "Accent" appearance.

Example 
@using Microsoft.FluentUI.AspNetCore.Components.

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

Renders as:

Hello World!

Click Me

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 Blazor components are built on 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. You can also find us on Gitter.
  • 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!

An unhandled error has occurred. Reload 🗙