Microsoft.Fast.Components.FluentUI 3.0.0-preview.2

Prefix Reserved

This is a prerelease version of Microsoft.Fast.Components.FluentUI.

There is a newer version of this package available.
See the version list below for details.

dotnet add package Microsoft.Fast.Components.FluentUI --version 3.0.0-preview.2

NuGet\Install-Package Microsoft.Fast.Components.FluentUI -Version 3.0.0-preview.2

This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.

<PackageReference Include="Microsoft.Fast.Components.FluentUI" Version="3.0.0-preview.2" />

For projects that support PackageReference, copy this XML node into the project file to reference the package.

paket add Microsoft.Fast.Components.FluentUI --version 3.0.0-preview.2

The NuGet Team does not provide support for this client. Please contact its maintainers for support.

#r "nuget: Microsoft.Fast.Components.FluentUI, 3.0.0-preview.2"

#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.

// Install Microsoft.Fast.Components.FluentUI as a Cake Addin
#addin nuget:?package=Microsoft.Fast.Components.FluentUI&version=3.0.0-preview.2&prerelease

// Install Microsoft.Fast.Components.FluentUI as a Cake Tool
#tool nuget:?package=Microsoft.Fast.Components.FluentUI&version=3.0.0-preview.2&prerelease

The NuGet Team does not provide support for this client. Please contact its maintainers for support.

Microsoft Fluent UI Blazor components

Nuget Nuget

⭐ We appreciate your star, it helps!

Introduction

The Microsoft.Fast.Components.FluentUI package provides a set of Blazor components which you can use to build applications that have the look and feel or modern Microsoft applications. Some of the componets are wrappers around Microsoft's official FluentUI Web Components. Others are components that leverage the Fluent UI design system or make it easier to work with Fluent UI. To get up and running with the library, see the 'Getting Started' section below.

The source for the library is hosted in the Fast Blazor repository at GitHub. Documentation on the components is available at the demo site and at docs.microsoft.com.

The source for @fluentui/web-components is hosted in the Fluent UI mono-repository. Documentation on the components is available on docs.microsoft.com. The FluentUI Web Components are built on FAST and work in every major browser.

When upgrading from an earlier version

If you are upgrading from an earlier version of the library, please see the what's new for information on (breaking) changes.

Getting Started

To get started using the Fluent UI Blazor components for Blazor, you will first need to install the official Nuget package for Fluent UI in the project you would like to use the library and components. You can use the following command:

dotnet add package Microsoft.Fast.Components.FluentUI

Scripts

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>

📓 Note

If you prefer to use another CDN, that is entirely possible. Just make sure it is offering the Fluent UI package and you are getting the right web-components.min.js file)

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 script tag is normally placed 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 Blazor 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.

Styles

In order for this library to work as expected, you will need to add the composed scoped CSS file for the components. This can be done by adding the following line to the <head> section of your index.html or _Layout.cshtml file in the project you installed the package:

<link href="{PROJECT_NAME}.styles.css" rel="stylesheet" />

It is possible that the line is already in place (but commented out).

Reboot

Reboot is a collection of element-specific CSS changes in a single file to help kick-start building a site with the Fluent UI Blazor components for Blazor. It provides an elegant, consistent, and simple baseline to build upon.

If you want to use Reboot, you'll need to add to your index.html or _Layout.cshtml file a line that includes the stylesheet (.css file). This can be done by adding the following line to the <head> section:

<link href="_content/Microsoft.Fast.Components.FluentUI/css/reboot.css" rel="stylesheet" />

It is entirely possible to build a site without using Reboot. If you choose not to use it, please do add the variables.css file (which is otherwise imported through the reboot.css file) to your index.html or _Layout.cshtml file in the <head> section like this:

<link href="_content/Microsoft.Fast.Components.FluentUI/css/variables.css" rel="stylesheet" />

The file contains a number of CSS variables that are required to be defined for the components to work correctly.

Project file

if you want to use icons and/or emoji, starting with the 2.1 version of the library you need add a <PropertyGroup> to your project file. With this you can specify which icons and emoji are made available for usage and publication. Please refer to the v2.1 section in the what's new document for more information.

Code

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

builder.Services.AddFluentUIComponents();

This addition makes sure all the necessary services the library uses are setup in a correct way.

If you want to use icons and/or emoji, starting with the 2.1 version of the library you need to make some changes here. Please refer to the v2.1 section in the what's new document for more information.

If you're running your application on Blazor Server, make sure a default HttpClient is available by adding the following:

builder.Services.AddHttpClient();

Getting started by using project templates

To make it easier to start a project that uses the Fluent UI Web Components for Blazor out of the box, we have created the Microsoft.Fast.Templates.FluentUI template package.

The package contains templates for creating Blazor Server and/or Blazor WebAssembly apps that mimic the regular Blazor templates with the Fluent UI components already set up (and all the Bootstrap styling removed). All components have been replaced with Fluent UI counterparts (and a few extra have been added). Please see the documentation page for more information.

If you want to use icons and/or emoji with applications based on the templates, you still need to make the changes to the project file and Program.cs as described in the previous sections.

Using the FluentUI Web Components

With the package installed and the script configured, 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.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 you don't have to add it to every razor page that uses one of the components.

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 (over 160) Design Tokens, which you can use both from code as in a declarative way in your .razor pages. See <a href="https://docs.microsoft.com/en-us/fluent-ui/web-components/design-system/design-tokens" target="_blank">https://docs.microsoft.com/en-us/fluent-ui/web-components/design-system/design-tokens</a> for more information on how Design Tokens work

Option 1: Using Design Tokens from C# code

Given the following .razor page fragment:

<FluentButton @ref="ref1" Appearance="Appearance.Filled">A button</FluentButton>
<FluentButton @ref="ref2" Appearance="Appearance.Filled">Another button</FluentButton>
<FluentButton @ref="ref3" Appearance="Appearance.Filled">And one more</FluentButton>
<FluentButton @ref="ref4" Appearance="Appearance.Filled" @onclick=OnClick>Last button</FluentButton>

You can use Design Tokens to manipulate the styles from C# code as follows:

[Inject]
private BaseLayerLuminance BaseLayerLuminance { get; set; } = default!;

[Inject]
private AccentBaseColor AccentBaseColor { get; set; } = default!;

[Inject]
private BodyFont BodyFont { get; set; } = default!;

[Inject]
private StrokeWidth StrokeWidth { get; set; } = default!;

[Inject]
private ControlCornerRadius ControlCornerRadius { get; set; } = default!;

private FluentButton? ref1;
private FluentButton? ref2;
private FluentButton? ref3;
private FluentButton? ref4;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
	if (firstRender)
	{
		//Set to dark mode
		await BaseLayerLuminance.SetValueFor(ref1!.Element, (float)0.15);

		//Set to Excel color
		await AccentBaseColor.SetValueFor(ref2!.Element, "#185ABD".ToSwatch());

		//Set the font
		await BodyFont.SetValueFor(ref3!.Element, "Comic Sans MS");

		//Set 'border' width for ref4
		await StrokeWidth.SetValueFor(ref4!.Element, 7);
		//And change conrner radius as well
		await ControlCornerRadius.SetValueFor(ref4!.Element, 15);

		StateHasChanged();
	}
}

public async Task OnClick()
{
	//Remove the wide border
	await StrokeWidth.DeleteValueFor(ref4!.Element);
}

As can be seen in the code above (with the ref4.Element), it is possible to apply multiple tokens to the same component.

For Design Tokens that work with a color value, you must call the ToSwatch() extension method on a string value or use one of the Swatch constructors. This makes sure the color is using a format that Design Tokens can handle. A Swatch has a lot of commonality with the System.Drawing.Color struct. Instead of the values of the components being between 0 and 255, in a Swatch they are expressed as a value between 0 and 1.

📓 Note

The Design Tokens are manipulated through JavaScript interop working with an ElementReference. There is no JavaScript element until after the component is rendered. This means you can only work with the Design Tokens from code after the component has been rendered in OnAfterRenderAsync and not in any earlier lifecycle methods.

Option 2: Using Design Tokens as components

The Design Tokens can also be used as components in a .razor page directely. It looks like this:

<BaseLayerLuminance Value="(float?)0.15">
	<FluentCard BackReference="@context">
		<div class="contents">
			Dark
			<FluentButton Appearance="Appearance.Accent">Accent</FluentButton>
			<FluentButton Appearance="Appearance.Stealth">Stealth</FluentButton>
			<FluentButton Appearance="Appearance.Outline">Outline</FluentButton>
			<FluentButton Appearance="Appearance.Lightweight">Lightweight</FluentButton>
		</div>
	</FluentCard>
</BaseLayerLuminance>

To make this work, a link needs to be created between the Design Token component and its child components. This is done with the BackReference="@context" construct.

📓 Note

Only one Design Token component at a time can be used this way. If you need to set more tokens, use the code approach as described in Option 1 above.

Option 3: Using the `<FluentDesignSystemProvider>`

The third way to customize the design in Blazor is to wrap the entire block you want to manipulate in a <FluentDesignSystemProvider>. This special element has a number of properties you can set to configure a subset of the tokens. Not all tokens are available/supported and we recommend this to only be used as a fall-back mechanism. The preferred method of working with the design tokens is to manipulate them from code as described in option 1.

Here's an example of changing the "accent base color" and switching the system into dark mode (in the file app.razor):

<FluentDesignSystemProvider AccentBaseColor="#464EB8" BaseLayerLuminance="0">
	<Router AppAssembly="@typeof(App).Assembly">
		<Found Context="routeData">
			<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
		</Found>
		<NotFound>
			<PageTitle>Not found</PageTitle>
			<LayoutView Layout="@typeof(MainLayout)">
				<p role="alert">Sorry, there's nothing at this address.</p>
			</LayoutView>
		</NotFound>
	</Router>
</FluentDesignSystemProvider>

📓 Note

FluentDesignSystemProvider token attributes can be changed on-the-fly like any other Blazor component attribute.

Colors for integration with specific Microsoft products

If you are configuring the components for integration into a specific Microsoft product, the following table provides AccentBaseColor values you can use. The library offers an OfficeColor enumeration which contains the specific accent colors for 17 different Office applications.

Product	AccentBaseColor
Office	#D83B01
Word	#185ABD
Excel	#107C41
PowerPoint	#C43E1C
Teams	#6264A7
OneNote	#7719AA
SharePoint	#03787C
Stream	#BC1948

Blazor Hybrid

Starting with the 2.0 release, you can also use this library in your Blazor Hybrid projects. Setup is almost the same as described in the "Getting started" section above, but to get everything to work you'll need to take two extra steps:

You need to add a MAUI specific IStaticAssetService implementation.
Due to some issues, this file can't be part of the library (yet) so this needs to be added manually to your MAUI Blazor project.
Create a new class in you project called FileBasedStaticAssetService.cs Replace it's contents with the following:

using System.Net;
using Microsoft.Fast.Components.FluentUI.Infrastructure;

namespace Microsoft.Fast.Components.FluentUI;

public class FileBasedStaticAssetService : IStaticAssetService
{
	private readonly CacheStorageAccessor _cacheStorageAccessor;

	public FileBasedStaticAssetService(CacheStorageAccessor cacheStorageAccessor)
	{
		_cacheStorageAccessor = cacheStorageAccessor;
	}

	public async Task<string> GetAsync(string assetUrl, bool useCache = false)
	{
		string result = null;

		HttpRequestMessage message = CreateMessage(assetUrl);


		if (useCache)
		{
			// Get the result from the cache
			result = await _cacheStorageAccessor.GetAsync(message);
		}

		if (string.IsNullOrEmpty(result))
		{
			//It not in the cache (or cache not used), read the asset from disk
			result = await ReadData(assetUrl);

			if (!string.IsNullOrEmpty(result))
			{
				if (useCache)
				{
					// If successful, create the response and store in the cache (when used)
					HttpResponseMessage response = new()
					{
						StatusCode = HttpStatusCode.OK,
						Content = new StringContent(result)
					};

					await _cacheStorageAccessor.PutAsync(message, response);
				}
			}
		}

		return result;
	}

	private static HttpRequestMessage CreateMessage(string url) => new(HttpMethod.Get, url);

	private static async Task<string> ReadData(string file)
	{
		using var stream = await FileSystem.OpenAppPackageFileAsync($"wwwroot/{file}");
		using var reader = new StreamReader(stream);

		return await reader.ReadToEndAsync();
	}
}

You need to make some changes in your MauiProgram.cs file
Make sure the following is added before the return builder.Build() line:

builder.Services.AddFluentUIComponents(options =>
{
		options.HostingModel = BlazorHostingModel.Hybrid;
});
builder.Services.AddScoped<IStaticAssetService, FileBasedStaticAssetService>();

Use the DataGrid component with EF Core

If you want to use the FluentDataGrid with data provided through EF Core, you need to install an additional package so the grid knows how to resolve queries asynchronously for efficiency. .

Installation

Install the package by running the command:

dotnet add package Microsoft.Fast.Components.FluentUI.DataGrid.EntityFrameworkAdapter

Usage

In your Program.cs file you need to add the following after the builder.Services.AddFluentUIComponents(); line:

builder.Services.AddDataGridEntityFrameworkAdapter();

Joining the Community

Looking to get answers to questions or engage with us in real-time? Our community is most active on Discord. Submit requests and issues on GitHub, or join us by contributing on some good first issues via GitHub.

If you don't find a component you're looking for, it's best to create the issue in our FAST repo here and limit issues on this repo to bugs in the Blazor component wrappers or Blazor-specific features.

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

Contact

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

Additional resources

The Microsoft Fluent UI Blazor components demo site
The Microsoft Fluent UI Blazor components documentation
The Fluent UI Web components demo site
The FAST site

Product	Compatible and additional computed target framework versions.
.NET	net6.0 is compatible. net6.0-android was computed. net6.0-ios was computed. net6.0-maccatalyst was computed. net6.0-macos was computed. net6.0-tvos was computed. net6.0-windows was computed. net7.0 is compatible. net7.0-android was computed. net7.0-ios was computed. net7.0-maccatalyst was computed. net7.0-macos was computed. net7.0-tvos was computed. net7.0-windows was computed. net8.0 is compatible. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed.

Product

.NET

Compatible target framework(s)

Included target framework(s) (in package)

Learn more about Target Frameworks and .NET Standard.

net6.0
- Markdig (>= 0.31.0)
- Microsoft.AspNetCore.Components.Web (>= 6.0.16)
- Microsoft.Extensions.Configuration.Abstractions (>= 6.0.0)
- Microsoft.Extensions.Hosting.Abstractions (>= 6.0.0)
- Microsoft.Extensions.Http (>= 6.0.0)
- System.Text.Json (>= 6.0.7)
net7.0
- Markdig (>= 0.31.0)
- Microsoft.AspNetCore.Components.Web (>= 7.0.5)
- Microsoft.Extensions.Configuration.Abstractions (>= 7.0.0)
- Microsoft.Extensions.Hosting.Abstractions (>= 7.0.0)
- Microsoft.Extensions.Http (>= 7.0.0)
- System.Text.Json (>= 7.0.2)
net8.0
- Markdig (>= 0.31.0)
- Microsoft.AspNetCore.Components.Web (>= 8.0.0-preview.3.23177.8)
- Microsoft.Extensions.Configuration.Abstractions (>= 8.0.0-preview.3.23174.8)
- Microsoft.Extensions.Hosting.Abstractions (>= 8.0.0-preview.3.23174.8)
- Microsoft.Extensions.Http (>= 8.0.0-preview.3.23174.8)
- System.Text.Json (>= 8.0.0-preview.3.23174.8)

NuGet packages (8)

Showing the top 5 NuGet packages that depend on Microsoft.Fast.Components.FluentUI:

Package	Downloads
FenixAlliance.ACL.Dependencies Application Component for the Alliance Business Suite.	889.7K
Microsoft.Fast.Components.FluentUI.Icons A set of icons wrapping Microsoft’s official Fluent UI Icon library.	56.9K
Microsoft.Fast.Components.FluentUI.Emojis A Blazor wrapper library for the official Microsoft Fluent UI Emoji set.	23.7K
Microsoft.Fast.Components.FluentUI.DataGrid.EntityFrameworkAdapter An adapter for using the Fluent UI Blazor DataGrid with Entity Framework.	6.6K
SobaFw.Client Package Description	6.2K

GitHub repositories (3)

Showing the top 3 popular GitHub repositories that depend on Microsoft.Fast.Components.FluentUI:

Repository	Stars
testcontainers/testcontainers-dotnet A library to support tests with throwaway instances of Docker containers for all compatible .NET Standard versions.	3.8K
microsoft/hack-together-teams HackTogether: The Microsoft Teams Global Hack \| Register, Hack, Win 👇	456
guitarrapc/SkiaSharp.QrCode Qr Code Generator with Skia. (no System.Drawing)	189

Version	Downloads	Last updated
3.8.0	1,635	11/13/2024
3.7.8	17,103	7/1/2024
3.7.7	224	6/30/2024
3.7.5	486	6/27/2024
3.7.4	692	6/24/2024
3.7.3	152	6/24/2024
3.7.2	2,231	6/13/2024
3.7.1	2,694	5/19/2024
3.7.1-preview.24138.3	92	5/17/2024
3.7.0	2,277	4/30/2024
3.6.2	1,799	4/23/2024
3.6.1	2,769	4/11/2024
3.6.0	7,048	3/7/2024
3.5.5	8,985	2/6/2024
3.5.4	7,499	1/31/2024
3.5.3	3,124	1/23/2024
3.5.2	2,483	1/19/2024
3.5.1	2,793	1/17/2024
3.5.0	51,730	12/14/2023
3.4.1	7,847	11/30/2023
3.4.0	3,292	11/28/2023
3.3.0	11,643	11/2/2023
3.2.2	10,747	10/24/2023
3.2.1	548	10/23/2023
3.2.0	14,021	10/9/2023
3.1.1	8,488	9/27/2023
3.1.0	2,439	9/22/2023
3.0.1	10,008	9/4/2023
3.0.0	11,403	8/28/2023
3.0.0-RC.1	2,520	7/17/2023
3.0.0-preview.5	551	7/4/2023
3.0.0-preview.4.230627.1	513	6/27/2023
3.0.0-preview.3	751	4/30/2023
3.0.0-preview.2	440	4/19/2023
2.4.3	20,540	8/25/2023
2.4.2	4,201	8/14/2023
2.4.1	22,444	7/14/2023
2.4.0	1,940	7/11/2023
2.3.6	47,322	6/8/2023
2.3.5	1,853	6/2/2023
2.3.4	1,560	5/30/2023
2.3.3	3,038	5/24/2023
2.3.1	895	5/19/2023
2.3.0	1,912	5/9/2023
2.2.1	5,306	5/1/2023
2.2.0	2,985	4/20/2023
2.2.0-preview.2	295	4/5/2023
2.1.4	13,085	3/21/2023
2.1.3	4,147	3/14/2023
2.1.2	2,526	3/10/2023
2.1.1	13,402	2/24/2023
2.1.0	1,923	2/23/2023
2.1.0-rc-4	1,605	2/21/2023
2.1.0-rc-3	2,871	2/15/2023
2.1.0-rc-2	2,390	2/10/2023
2.1.0-beta-1	3,727	1/24/2023
2.0.5	11,858	2/12/2023
2.0.4	1,793	2/6/2023
2.0.3	2,885	1/31/2023
2.0.2	9,775	1/25/2023
2.0.1	5,728	1/10/2023
2.0.0	2,970	1/6/2023
2.0.0-rc-2	1,874	12/21/2022
2.0.0-rc-1	1,376	11/30/2022
1.6.1	2,410	1/31/2023
1.6.0	17,820	11/8/2022
1.5.3	60,503	9/12/2022
1.5.2	23,766	9/6/2022
1.5.1	25,351	8/19/2022
1.5.0	64,232	7/18/2022
1.4.4	134,883	6/10/2022
1.4.3	1,918	6/7/2022
1.4.2	102,910	6/2/2022
1.4.1	233,861	5/11/2022
1.4.0	3,350	4/26/2022
1.3.1	2,036	4/25/2022
1.3.0	2,315	4/18/2022
1.2.1	2,125	4/12/2022
1.2.0	3,688	3/23/2022
1.1.0	25,774	12/3/2021
1.0.0	10,584	11/9/2021
0.5.0	413	10/29/2021
0.4.0	5,895	10/7/2021
0.3.0	4,098	8/5/2021
0.2.0	8,117	5/24/2021
0.1.0	1,552	5/6/2021
0.0.4	1,448	5/5/2021
0.0.3	1,446	5/5/2021
0.0.2	1,746	5/5/2021