FluentUI Configuration In Blazor Application

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

using Microsoft.FluentUI.AspNetCore.Components;

builder.Services.AddRazorComponents()
   .AddInteractiveServerComponents();
 
builder.Services.AddFluentUIComponents();  // add this
 
var app = builder.Build();

@using Microsoft.FluentUI.AspNetCore.Components

Reboot is a collection of element-specific CSS changes in a single file to help kickstart building a site with the Fluent UI Blazor library. It provides an elegant, consistent, and simple baseline to build upon (inspired by Bootstrap's Reboot which again is based on Normalize.css)

If you want to use Reboot, you'll need to include it in your App.razor or index.html file like this:

<link rel="stylesheet" href="@Assets["reboot.css"]" />

You can download it from the Reboot.css page here.

FluentUI Blazor Components

Code Setup