Microsoft.Fast

Introduction

The Microsoft.Fast.Components.FluentUI package provides a lightweight set of Blazor component wrappers around Microsoft's official FluentUI Web Components. The FluentUI Web Components are built on FAST and work in every major browser. To get up and running with Microsoft.Fast.Components.FluentUI see the Getting Started section below.

The source for @fluentui/web-components is hosted in the Fluent UI mono-repository. Documentation on the components is available on docs.microsoft.com.

Getting Started

To get started using the Fluent UI Web Components for Blazor, you will first need to install the official Nuget package for Fluent UI. You can use the following command:

dotnet add package Microsoft.Fast.Components.FluentUI

Next, you need to add the web components script. You can either add the script from CDN directly, or you can install it with NPM, whichever you prefer.

To add the script from CDN use the following markup:

<script type="module" src="https://cdn.jsdelivr.net/npm/@fluentui/web-components/dist/web-components.min.js"></script>

The markup above always references the latest release of the components. When deploying to production, you will want to ship with a specific version. Here's an example of the markup for that:

<script type="module" src="https://cdn.jsdelivr.net/npm/@fluentui/web-components@2.0.2/dist/web-components.min.js"></script>

The best place to put the script tag is typically in your index.html (_Layout.cshtml for blazor server project) file in the script section at the bottom of the <body>.

If you wish to leverage NPM instead, run the following command:

npm install --save @fluentui/web-components

You can locate the single file script build in the following location:

node_modules/@fluentui/web-components/dist/web-components.min.js

Copy this to your wwwroot/script folder and reference it with a script tag as described above.

📓 Note
If you are setting up Fluent UI Web Components on a Blazor Server project, you will need to escape the @ character by repeating it in the source link. For more information check out the Razor Pages syntax documentation.

In your Program.cs file you need to add the following:

builder.Services.AddFluentUIComponents();

if you are using Blazor Server, you need to make sure the HttpClient service is added:

builder.Services.AddHttpClient();

Using the FluentUI Web Components

With the package installed and the script configured, you can begin using the Fluent UI Web Components in the same way as any other Blazor component. Just be sure to add the following using statement to your views:

@using Microsoft.Fast.Components.FluentUI

Here's a small example of a FluentCard with a FluentButton that uses the Fluent "Accent" appearance:

@using Microsoft.Fast.Components.FluentUI

<FluentCard>
  <h2>Hello World!</h2>
  <FluentButton Appearance="@Appearance.Accent">Click Me</FluentButton>
</FluentCard>

💡 Tip
You can add @using Microsoft.Fast.Components.FluentUI to the namespace collection in _Imports.razor, so that you can avoid repeating it in every single razor page.