Microsoft.Fast.Components.FluentUI 1.2.0

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
There is a newer version of this package available.
See the version list below for details. 
dotnet add package Microsoft.Fast.Components.FluentUI --version 1.2.0
NuGet\Install-Package Microsoft.Fast.Components.FluentUI -Version 1.2.0
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="1.2.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
paket add Microsoft.Fast.Components.FluentUI --version 1.2.0
#r "nuget: Microsoft.Fast.Components.FluentUI, 1.2.0"
#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=1.2.0

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

Microsoft.Fast

License: MIT .NET C# Nuget

Validate PRs Validate Security

Discord Twitter

⭐ We appreciate your star, it helps!

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.

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 namespace collection in _Imports.razor, so that you can avoid repeating it in every single razor page.

Configuring the Design System

The Fluent UI Web 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 easiest way to accomplish this in Blazor is to wrap the entire UI in a FluentDesignSystemProvider. This special element has a number of properties you can set to configure the tokens to your desired settings. 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

Provider token attributes can be changed on-th-fly like any other Blazor component attribute.

If you are attempting to configure the components for integration into a specific Microsoft product, the following table provides AccentBaseColor values you can use:

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

For a list of all available token attributes, see here. More examples for other components can be found in the examples folder of this repository.

Joining the Community

Looking to get answers to questions or engage with us in realtime? 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.
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 was computed.  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.2 140 4/23/2024
3.6.1 1,095 4/11/2024
3.6.0 4,220 3/7/2024
3.5.5 5,199 2/6/2024
3.5.4 3,369 1/31/2024
3.5.3 2,149 1/23/2024
3.5.2 2,014 1/19/2024
3.5.1 1,953 1/17/2024
3.5.0 14,402 12/14/2023
3.4.1 6,675 11/30/2023
3.4.0 2,425 11/28/2023
3.3.0 9,950 11/2/2023
3.2.2 6,799 10/24/2023
3.2.1 519 10/23/2023
3.2.0 11,405 10/9/2023
3.1.1 5,482 9/27/2023
3.1.0 2,184 9/22/2023
3.0.1 8,971 9/4/2023
3.0.0 7,552 8/28/2023
3.0.0-RC.1 2,475 7/17/2023
3.0.0-preview.5 523 7/4/2023
3.0.0-preview.4.230627.1 481 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,773 8/25/2023
2.4.2 3,109 8/14/2023
2.4.1 17,645 7/14/2023
2.4.0 1,913 7/11/2023
2.3.6 41,185 6/8/2023
2.3.5 1,767 6/2/2023
2.3.4 1,498 5/30/2023
2.3.3 2,599 5/24/2023
2.3.1 871 5/19/2023
2.3.0 1,831 5/9/2023
2.2.1 5,175 5/1/2023
2.2.0 2,829 4/20/2023
2.2.0-preview.2 266 4/5/2023
2.1.4 12,479 3/21/2023
2.1.3 4,051 3/14/2023
2.1.2 2,424 3/10/2023
2.1.1 12,620 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,688 2/12/2023
2.0.4 1,738 2/6/2023
2.0.3 2,830 1/31/2023
2.0.2 8,467 1/25/2023
2.0.1 5,145 1/10/2023
2.0.0 2,889 1/6/2023
2.0.0-rc-2 1,828 12/21/2022
2.0.0-rc-1 1,328 11/30/2022
1.6.1 2,334 1/31/2023
1.6.0 15,697 11/8/2022
1.5.3 56,863 9/12/2022
1.5.2 22,315 9/6/2022
1.5.1 23,781 8/19/2022
1.5.0 56,666 7/18/2022
1.4.4 121,207 6/10/2022
1.4.3 1,849 6/7/2022
1.4.2 90,985 6/2/2022
1.4.1 209,717 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,638 3/23/2022
1.1.0 25,134 12/3/2021
1.0.0 10,103 11/9/2021
0.5.0 396 10/29/2021
0.4.0 5,843 10/7/2021
0.3.0 3,939 8/5/2021
0.2.0 7,717 5/24/2021
0.1.0 1,517 5/6/2021
0.0.4 1,413 5/5/2021
0.0.3 1,409 5/5/2021
0.0.2 1,654 5/5/2021