====== FluentUI Configuration In Blazor Application ======

===== Project Packages =====

<code bash>
dotnet add package Microsoft.FluentUI.AspNetCore.Components
</code>

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

<code bash>
dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons

dotnet add package Microsoft.FluentUI.AspNetCore.Components.Emoji
</code>

===== Program.cs =====

<code csharp>
using Microsoft.FluentUI.AspNetCore.Components;
</code>

<WRAP prewrap>
<code csharp>
builder.Services.AddRazorComponents()
   .AddInteractiveServerComponents();

builder.Services.AddFluentUIComponents();  // add this

var app = builder.Build();
</code>
</WRAP>

===== _Imports.razor =====

<code razor>
@using Microsoft.FluentUI.AspNetCore.Components
</code>

===== Reboot.css =====

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:

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

You can download it from the Reboot.css page [[https://www.fluentui-blazor.net/Reboot|here]].

===== Links =====

[[https://www.fluentui-blazor.net/|FluentUI Blazor Components]]

[[https://www.fluentui-blazor.net/CodeSetup|Code Setup]]

{{tag>dotnet}}