Microsoft.Fast.Components.FluentUI 3.6.1

The ID prefix of this package has been reserved for one of the owners of this package by NuGet.org. Prefix Reserved
.NET 6.0 
dotnet add package Microsoft.Fast.Components.FluentUI --version 3.6.1
NuGet\Install-Package Microsoft.Fast.Components.FluentUI -Version 3.6.1
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.6.1" />
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.6.1
#r "nuget: Microsoft.Fast.Components.FluentUI, 3.6.1"
#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.6.1

// Install Microsoft.Fast.Components.FluentUI as a Cake Tool
#tool nuget:?package=Microsoft.Fast.Components.FluentUI&version=3.6.1

Microsoft Fluent UI Blazor components

License: MIT .NET C# Nuget Nuget

Validate Security Gitter Discord

⭐ We appreciate your star, it helps!

This package is for use in .NET 6 or .NET 7 Blazor projects. If you are using .NET 8, please use the next version (v4) of the package which has been renamed to Microsoft.FluentUI.AspNetCore.Components

Introduction

The Microsoft.Fast.Components.FluentUI package provides a set of Blazor components which are used to build applications that have a Fluent design (i.e. have the look and feel or modern Microsoft applications). Some of the components in the library are wrappers around Microsoft's official Fluent UI Web Components. Others are components that leverage the Fluent 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 fluentui-blazor repository at GitHub. Documentation on the components is available at the demo site.

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 Blazor 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

Script

The heart of this library is formed by the Fluent UI Web Components and implemented in the web-components.min.js script file. From version 2.3 onwards, the script is included in the library itself and no longer needs to be added to your index.html or _Layout.cshtml. In fact, doing this might lead to unpredictable results.

If you are upgrading from an earlier version please remove the script from your index.html or _Layout.cshtml file.

The script is added to the application automatically. This way we can safeguard that you are always using the best matching script version.

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.

Code

Please refer to the code setup document to learn what needs to be included in your Program.cs file so that all necessary services are available and setup in the correct way.

Working with Icons and Emoji

We have additional packages available that include the complete Fluent UI System icons and Fluent UI Emoji collections. Please refer to the Icons and Emoji page for more information.

Getting started by using project templates

To make it easier to start a project that uses the Fluent UI Blazor components 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. The library is already set up (and all the Bootstrap styling removed). All components from the regular template have been replaced with Fluent UI Blazor 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 project setup and code setup documents.

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 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 in the design tokens page.

Blazor Hybrid

You can use this library in Blazor Hybrid (MAUI/WPF/Windows Forms) 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 some extra steps (for now):

  1. You need to make some changes in your {Type}Program.cs file. Make sure the following is added before the return builder.Build() line:
builder.Services.AddFluentUIComponents(options =>
{
		options.HostingModel = BlazorHostingModel.Hybrid;
});

Temporary workaround for MAUI/WPF/Windows Forms issues

Currently when using the WebView to run Blazor (so all Hybrid variants) the web-components script is not imported automatically (see #404. There is also an issue with loading the custom event handlers that are being configured by the web-components script. Until these are fixed on the WebView side, there is a workaround available, namely to intercept '_framework/blazor.modules.json' and provide proper JS initializers file (created by build). The needed initializersLoader.webview.js has been added to the library and needs to be included with a script tag before the _framework/blazor.webview.js script tag:

<script app-name="{NAME OF YOUR APP}" src="./_content/Microsoft.Fast.Components.FluentUI/js/initializersLoader.webview.js"></script>
<script src="_framework/blazor.webview.js"></script>

The app-name attribute needs to match your app's assembly name - initializersLoader uses 'app-name' to resolve name of the file with initializers. initializersLoader replaces standard fetch function with one which provides the correct file in place of the empty blazor.modules.json. fetch is restored to its original state once _framework/blazor.modules.json request is intercepted.

For more information regarding the bug, see issue 15234 in the MAUI repo.

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(...); lines:

builder.Services.AddDataGridEntityFrameworkAdapter();

Additional resources

Contributing to the project

We offer some guidelines on how you can get started contributing to the project. We alo have a document that explains and shows how to write and develop unit tests

Joining the Community

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

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

Contact

  • Join the community and chat with us in real-time on Gitter or Discord.
  • Submit requests and issues on GitHub.
  • Contribute by helping out on some of our recommended first issues on GitHub.
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 was computed.  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. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

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.
Microsoft.Fast.Components.FluentUI.Icons The ID prefix of this package has been reserved for one of the owners of this package by NuGet.org.

A set of icons wrapping Microsoft’s official Fluent UI Icon library.
Microsoft.Fast.Components.FluentUI.Emojis The ID prefix of this package has been reserved for one of the owners of this package by NuGet.org.

A Blazor wrapper library for the official Microsoft Fluent UI Emoji set.
SobaFw.Client

Package Description
Microsoft.Fast.Components.FluentUI.DataGrid.EntityFrameworkAdapter The ID prefix of this package has been reserved for one of the owners of this package by NuGet.org.

An adapter for using the Fluent UI Blazor DataGrid with Entity Framework.

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.
microsoft/hack-together-teams
HackTogether: The Microsoft Teams Global Hack | Register, Hack, Win 👇
guitarrapc/SkiaSharp.QrCode
Qr Code Generator with Skia. (no System.Drawing)
Version Downloads Last updated
3.6.1 758 4/11/2024
3.6.0 4,001 3/7/2024
3.5.5 5,126 2/6/2024
3.5.4 3,306 1/31/2024
3.5.3 2,145 1/23/2024
3.5.2 2,004 1/19/2024
3.5.1 1,915 1/17/2024
3.5.0 13,657 12/14/2023
3.4.1 6,592 11/30/2023
3.4.0 2,313 11/28/2023
3.3.0 9,928 11/2/2023
3.2.2 6,658 10/24/2023
3.2.1 516 10/23/2023
3.2.0 11,212 10/9/2023
3.1.1 5,468 9/27/2023
3.1.0 2,166 9/22/2023
3.0.1 8,954 9/4/2023
3.0.0 7,441 8/28/2023
3.0.0-RC.1 2,474 7/17/2023
3.0.0-preview.5 523 7/4/2023
3.0.0-preview.4.230627.1 478 6/27/2023
3.0.0-preview.3 715 4/30/2023
3.0.0-preview.2 421 4/19/2023
2.4.3 2,665 8/25/2023
2.4.2 3,086 8/14/2023
2.4.1 17,598 7/14/2023
2.4.0 1,913 7/11/2023
2.3.6 40,813 6/8/2023
2.3.5 1,767 6/2/2023
2.3.4 1,498 5/30/2023
2.3.3 2,581 5/24/2023
2.3.1 871 5/19/2023
2.3.0 1,828 5/9/2023
2.2.1 5,172 5/1/2023
2.2.0 2,822 4/20/2023
2.2.0-preview.2 266 4/5/2023
2.1.4 12,470 3/21/2023
2.1.3 4,051 3/14/2023
2.1.2 2,421 3/10/2023
2.1.1 12,610 2/24/2023
2.1.0 1,864 2/23/2023
2.1.0-rc-4 1,563 2/21/2023
2.1.0-rc-3 2,782 2/15/2023
2.1.0-rc-2 2,313 2/10/2023
2.1.0-beta-1 3,649 1/24/2023
2.0.5 10,672 2/12/2023
2.0.4 1,738 2/6/2023
2.0.3 2,827 1/31/2023
2.0.2 8,457 1/25/2023
2.0.1 5,138 1/10/2023
2.0.0 2,889 1/6/2023
2.0.0-rc-2 1,824 12/21/2022
2.0.0-rc-1 1,328 11/30/2022
1.6.1 2,328 1/31/2023
1.6.0 15,654 11/8/2022
1.5.3 56,716 9/12/2022
1.5.2 22,296 9/6/2022
1.5.1 23,765 8/19/2022
1.5.0 56,565 7/18/2022
1.4.4 120,994 6/10/2022
1.4.3 1,849 6/7/2022
1.4.2 90,791 6/2/2022
1.4.1 209,300 5/11/2022
1.4.0 3,297 4/26/2022
1.3.1 1,989 4/25/2022
1.3.0 2,270 4/18/2022
1.2.1 2,080 4/12/2022
1.2.0 3,636 3/23/2022
1.1.0 25,121 12/3/2021
1.0.0 10,101 11/9/2021
0.5.0 394 10/29/2021
0.4.0 5,841 10/7/2021
0.3.0 3,937 8/5/2021
0.2.0 7,707 5/24/2021
0.1.0 1,515 5/6/2021
0.0.4 1,411 5/5/2021
0.0.3 1,407 5/5/2021
0.0.2 1,650 5/5/2021