Microsoft.FluentUI.AspNetCore.Components
4.0.0-rc.3
Prefix Reserved
See the version list below for details.
dotnet add package Microsoft.FluentUI.AspNetCore.Components --version 4.0.0-rc.3
NuGet\Install-Package Microsoft.FluentUI.AspNetCore.Components -Version 4.0.0-rc.3
<PackageReference Include="Microsoft.FluentUI.AspNetCore.Components" Version="4.0.0-rc.3" />
paket add Microsoft.FluentUI.AspNetCore.Components --version 4.0.0-rc.3
#r "nuget: Microsoft.FluentUI.AspNetCore.Components, 4.0.0-rc.3"
// Install Microsoft.FluentUI.AspNetCore.Components as a Cake Addin #addin nuget:?package=Microsoft.FluentUI.AspNetCore.Components&version=4.0.0-rc.3&prerelease // Install Microsoft.FluentUI.AspNetCore.Components as a Cake Tool #tool nuget:?package=Microsoft.FluentUI.AspNetCore.Components&version=4.0.0-rc.3&prerelease
Microsoft Fluent UI Blazor components
⭐ We appreciate your star, it helps!
This package is for use in .NET 8 Blazor projects. If you are using .NET 6 or 7, please use the v3 version f the package which is named Microsoft.Fast.Components.FluentUI
V4.0 progress
- v4.0.0-rc.2 is out! Please test and report issues you find.
- v4.0.0-preview.2 is functionally equal to v3.2.2
Introduction
The Microsoft.FluentUI.AspNetCore.Components 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.
What's new?
If you are upgrading from an earlier version of the library, please see the what's new page for information on (breaking) changes.
Getting Started
The easiest way to get started is by using our templates. TTo start using the Fluent UI Blazor components from scratch, you first need to install the main Nuget package in the project you would like to use the library and components. You can use the NuGet package manager in your IDE for that or use the following command when using a CLI:
dotnet add package Microsoft.FluentUI.AspNetCore.Components
Script
As mentioned, we wrap the Fluent UI Web Components. These components are implemented in a script file which is included in the library itself and does not have to be downloaded or pulled from a CDN.
It is dependant on what type of project you are creating, if the script needs to be added to your index.html or App.razor file. When using
SSR, you will need to include the web components script. As there is no Blazor script being loaded/used, our script will also not get loaded.
In this situation, include the following in your App.razor:
<script src="_content/Microsoft.FluentUI.AspNetCore.Components/js/web-components-v2.5.16.min.js" type="module" async></script>
If you later add interactivity, the Blazor script will kick in and to load the web component script again but JavaScript will handle that gracefully by design.
If you use the templates to create your project, inserting the script will be taken care of based on the choices you make when creating the application. By including the script in the library 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, _Layout.cshtml or App.razor 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).
IMPORTANT: When you change the root namespace/assembly name of your project, you need to update the {PROJECT_NAME} in your copy of the code above accordingly.
Reboot
Reboot is a collection of element-specific CSS changes in a single file to help kickstart building a site with the Fluent UI Blazor components. 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, _Layout.cshtml or App.razor 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.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet" />
When using the templates to create your application, Reboot is already set-up for you.
It is entirely possible to build a site without using Reboot. If you do not want to use Reboot and you used the templates as a starting poin, just
remove the following line from the app.css file (it is the first line in the file):
@import '/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';
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.FluentUI.AspNetCore.Templates 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.FluentUI.AspNetCore.Components
Here's a small example of a FluentCard with a FluentButton that uses the Fluent "Accent" appearance:
@using Microsoft.FluentUI.AspNetCore.Components
<FluentCard Width="400px" Height="250px">
<h2>Hello World!</h2>
<FluentButton Appearance="@Appearance.Accent">Click Me</FluentButton>
</FluentCard>
Tip
You can add
@using Microsoft.FluentUI.AspNetCore.Componentsto 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
It is possible to use this library in your Blazor Hybrid projects. Setup is almost the same as described in the "Getting started" section above, however to get everything to work you'll need to take one extra step:
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 isue 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 a 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.FluentUI.AspNetCore.Components/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 the 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.FluentUI.AspNetCore.Components.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
- The Microsoft Fluent UI Blazor components documentation and demo site
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
| Product | Versions Compatible and additional computed target framework versions. |
|---|---|
| .NET | 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. |
-
net8.0
- Microsoft.AspNetCore.Components.Web (>= 8.0.0-rc.2.23480.2)
- Microsoft.Extensions.Configuration.Abstractions (>= 8.0.0-rc.2.23479.6)
- Microsoft.Extensions.Hosting.Abstractions (>= 8.0.0-rc.2.23479.6)
- Microsoft.Extensions.Http (>= 8.0.0-rc.2.23479.6)
NuGet packages (36)
Showing the top 5 NuGet packages that depend on Microsoft.FluentUI.AspNetCore.Components:
| Package | Downloads |
|---|---|
|
Microsoft.FluentUI.AspNetCore.Components.Icons
A Blazor wrapper library for the official Microsoft Fluent UI System Icons library. |
|
|
Microsoft.FluentUI.AspNetCore.Components.Emoji
A Blazor wrapper library for the official Microsoft Fluent UI Emoji set. |
|
|
Microsoft.FluentUI.AspNetCore.Components.DataGrid.EntityFrameworkAdapter
An adapter for using the Fluent UI Blazor DataGrid with Entity Framework. |
|
|
Aspire.Dashboard
Dashboard browser interface for .NET Aspire. |
|
|
BlazorGenerator
You think of the models, Blazorgen the Blazor UI. This is a view creator based on fields in models. You only need to define which type of page this model will become! |
GitHub repositories (5)
Showing the top 5 popular GitHub repositories that depend on Microsoft.FluentUI.AspNetCore.Components:
| Repository | Stars |
|---|---|
|
dotnet/aspire
Tools, templates, and packages to accelerate building observable, production-ready apps
|
|
|
microsoft/fluentui-blazor
Microsoft Fluent UI Blazor components library. For use with ASP.NET Core Blazor applications
|
|
|
JasonBock/Rocks
A mocking library based on the Compiler APIs (Roslyn + Mocks)
|
|
|
BSData/phalanx
Project Phalanx is a roster editor handling BattleScribe datafiles
|
|
|
BlazorStatic/BlazorStatic
Harness the power of Blazor to craft static websites.
|
| Version | Downloads | Last updated |
|---|---|---|
| 4.10.4 | 3,667 | 11/13/2024 |
| 4.10.3 | 12,627 | 10/28/2024 |
| 4.10.2 | 22,824 | 10/9/2024 |
| 4.10.1 | 13,418 | 9/26/2024 |
| 4.10.0 | 25,614 | 9/6/2024 |
| 4.9.3 | 55,342 | 7/23/2024 |
| 4.9.2 | 17,467 | 7/19/2024 |
| 4.9.1 | 11,853 | 7/10/2024 |
| 4.9.0 | 8,556 | 7/4/2024 |
| 4.8.1 | 11,039 | 6/24/2024 |
| 4.8.0 | 9,768 | 6/17/2024 |
| 4.7.2 | 50,296 | 5/3/2024 |
| 4.7.1 | 13,339 | 4/23/2024 |
| 4.6.1 | 11,710 | 4/10/2024 |
| 4.6.0 | 11,888 | 3/28/2024 |
| 4.5.1-preview.24080.3 | 1,679 | 3/22/2024 |
| 4.5.1-preview.24073.1 | 1,967 | 3/14/2024 |
| 4.5.1-preview.24072.11 | 622 | 3/13/2024 |
| 4.5.1-preview.24071.8 | 443 | 3/12/2024 |
| 4.5.1-preview.24068.9 | 497 | 3/11/2024 |
| 4.5.0 | 42,266 | 3/7/2024 |
| 4.4.2-preview.24066.14 | 351 | 3/7/2024 |
| 4.4.2-preview.24065.20 | 471 | 3/6/2024 |
| 4.4.2-preview.24064.26 | 497 | 3/5/2024 |
| 4.4.2-preview.24060.3 | 1,315 | 3/1/2024 |
| 4.4.2-preview.24059.19 | 538 | 2/29/2024 |
| 4.4.2-preview.24058.32 | 517 | 2/28/2024 |
| 4.4.2-preview.24057.18 | 480 | 2/27/2024 |
| 4.4.2-preview.24054.2 | 481 | 2/26/2024 |
| 4.4.2-preview.24051.9 | 1,617 | 2/21/2024 |
| 4.4.2-preview.24050.4 | 433 | 2/20/2024 |
| 4.4.2-preview.24048.2 | 540 | 2/19/2024 |
| 4.4.2-preview.24046.2 | 739 | 2/16/2024 |
| 4.4.2-preview.24045.1 | 457 | 2/15/2024 |
| 4.4.2-preview.24044.13 | 561 | 2/14/2024 |
| 4.4.2-preview.24043.4 | 564 | 2/13/2024 |
| 4.4.2-preview.24042.8 | 492 | 2/12/2024 |
| 4.4.2-preview.24040.1 | 513 | 2/9/2024 |
| 4.4.1 | 32,350 | 2/6/2024 |
| 4.4.0 | 6,310 | 2/2/2024 |
| 4.3.1 | 20,498 | 1/12/2024 |
| 4.3.0 | 4,600 | 1/8/2024 |
| 4.2.1 | 9,869 | 12/20/2023 |
| 4.2.0 | 6,059 | 12/13/2023 |
| 4.1.1 | 34,815 | 11/30/2023 |
| 4.1.0 | 1,709 | 11/28/2023 |
| 4.0.0 | 7,150 | 11/14/2023 |
| 4.0.0-rc.3 | 312 | 11/10/2023 |
| 4.0.0-rc.2 | 198 | 11/6/2023 |
| 4.0.0-rc.1 | 314 | 11/2/2023 |
| 4.0.0-preview.2 | 31,079 | 10/25/2023 |
| 4.0.0-preview.1 | 160 | 10/23/2023 |