{"id":13591219,"url":"https://github.com/microsoft/fluentui-blazor","last_synced_at":"2025-05-13T16:05:32.300Z","repository":{"id":37397665,"uuid":"348132133","full_name":"microsoft/fluentui-blazor","owner":"microsoft","description":"Microsoft Fluent UI Blazor components library. For use with ASP.NET Core Blazor applications","archived":false,"fork":false,"pushed_at":"2025-05-05T19:48:30.000Z","size":190680,"stargazers_count":4283,"open_issues_count":38,"forks_count":419,"subscribers_count":69,"default_branch":"dev","last_synced_at":"2025-05-05T22:49:11.688Z","etag":null,"topics":["adaptive-ui","blazor","component-architecture","component-library","components","csharp","csharp-library","design-systems","development-tools","fluent","fluentui","front-end-framework","web-components","web-standards","webassembly"],"latest_commit_sha":null,"homepage":"https://www.fluentui-blazor.net","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/microsoft.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"docs/contributing.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-03-15T21:48:18.000Z","updated_at":"2025-05-05T21:46:01.000Z","dependencies_parsed_at":"2024-12-10T09:01:52.388Z","dependency_job_id":"1ddbd99a-d2dc-4ee7-923b-9894caf295c1","html_url":"https://github.com/microsoft/fluentui-blazor","commit_stats":{"total_commits":2554,"total_committers":113,"mean_commits":"22.601769911504423","dds":0.2682067345340642,"last_synced_commit":"d5006308e55666787166c11af9b59dbdc0041d6a"},"previous_names":["microsoft/fast-blazor"],"tags_count":111,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoft%2Ffluentui-blazor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoft%2Ffluentui-blazor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoft%2Ffluentui-blazor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoft%2Ffluentui-blazor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/microsoft","download_url":"https://codeload.github.com/microsoft/fluentui-blazor/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252590523,"owners_count":21772935,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["adaptive-ui","blazor","component-architecture","component-library","components","csharp","csharp-library","design-systems","development-tools","fluent","fluentui","front-end-framework","web-components","web-standards","webassembly"],"created_at":"2024-08-01T16:00:54.815Z","updated_at":"2025-05-05T22:49:31.610Z","avatar_url":"https://github.com/microsoft.png","language":"C#","readme":"# Microsoft Fluent UI Blazor library\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![.NET C#](https://img.shields.io/badge/.NET-C%23-blue)](https://docs.microsoft.com/en-us/dotnet/csharp/)\n[![NuGet](https://img.shields.io/nuget/v/Microsoft.FluentUI.AspNetCore.Components?label=NuGet%20Component%20Library)](https://www.nuget.org/packages/Microsoft.FluentUI.AspNetCore.Components)\n[![NuGet](https://img.shields.io/nuget/v/Microsoft.FluentUI.AspNetCore.Templates?label=NuGet%20Templates)](https://www.nuget.org/packages/Microsoft.FluentUI.AspNetCore.Templates)\n\n[![Validate Security](https://github.com/microsoft/fluentui-blazor/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/microsoft/fluentui-blazor/actions/workflows/codeql-analysis.yml)\n[![Discord](https://img.shields.io/badge/chat%20on-discord-7289da.svg)](https://discord.gg/M5cBTfp6J2)\n\n:star:  We appreciate your star, it helps!\n\nThis package is for use in .NET 8 and 9 Blazor projects. If you are using **now unsupported** .NET 6 or 7, please use the v3 version of the packages (names starting with `Microsoft.Fast.Components.FluentUI`)\n\n## Introduction\n\nThe `Microsoft.FluentUI.AspNetCore` family of packages provides a set of Razor components for [Blazor](https://blazor.net) applications, tools and utilities which are used to build applications that have a Fluent design (i.e. have the look and feel of modern Microsoft applications). \n\nSome 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. To get up and running with the library, see the **Getting Started** section below.\n\nThe source for the library is hosted in the [fluentui-blazor](https://github.com/microsoft/fluentui-blazor) repository at GitHub. Documentation on the components is available at the [demo site](https://www.fluentui-blazor.net). \n\n## Upgrading from an earlier version \n\nIf you are upgrading from an earlier version of the library, please see the [what's new](https://www.fluentui-blazor.net/whatsnew) for information on (breaking) changes.\n\n## Getting Started\n\n### Using our dotnet templates\n\nThe easiest way to get started is by using our [Templates](https://www.nuget.org/packages/Microsoft.FluentUI.AspNetCore.Templates). These mimic the regular Blazor templates and come with the design and components pre-configured. You install them with this command:\n```shell\ndotnet new install Microsoft.FluentUI.AspNetCore.Templates\n```\n\nNavigate to a folder where you want to create your new project and run the following command to create a new project.\n```shell\ndotnet new fluentblazor --name MyApplication\n```\n\nIf you want to create a new standalone WebAssembly project, you can use the following command:\n```shell\ndotnet new fluentblazorwasm --name MyApplication\n```\n\nOther available templates are:\n- Fluent .NET Aspire Starter App (fluentaspire-starter)\n- Fluent .NET MAUI Blazor Hybrid and Web App (fluentmaui-blazor-web)\n\nWhen using Visual Studio, you can also use the **New Project** dialog to create a new project. The templates can be found by typine **Fluent** in the search field.\n\n### Manual Install\nTo start using the Fluent UI Blazor library from scratch, you first need to install the main [NuGet package](https://www.nuget.org/packages/Microsoft.FluentUI.AspNetCore.Components/) in the project you want to use the library and its components.\nYou can use the NuGet package manager in your IDE or use the following command when using a CLI:\n\n```shell\ndotnet add package Microsoft.FluentUI.AspNetCore.Components\n```\n\nIf you want to extend the functionality of the library with [icons](https://www.nuget.org/packages/Microsoft.FluentUI.AspNetCore.Components.Icons) or [emoji](https://www.nuget.org/packages/Microsoft.FluentUI.AspNetCore.Components.Emoji), you can install additional packages for that:\n\n```shell\ndotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons\ndotnet add package Microsoft.FluentUI.AspNetCore.Components.Emoji\n```\n\n### Script\nAs mentioned, we wrap the **Fluent UI Web Components** which are implemented in a script file. This **file is included in the library** itself and does not have to be downloaded or pulled from a CDN.\n\n\u003e By including the script in the library we can safeguard that you are always using the best matching script version.\n\nEven when using **SSR (Static Server Rendering)**, the script will be included and loaded automatically. If you want the script to be loaded before Blazor starts, add it to your `App.razor` file like this:\n\n```html\n\u003cscript src=\"_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js\" type=\"module\" async\u003e\u003c/script\u003e\n```\nIf you add interactivity later, the Blazor script will kick in and try to load the web component script again but JavaScript will handle that gracefully by design.\n\n### Reboot (optional)\n**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. It provides an elegant, consistent, and simple baseline to build upon.\n\nIf you want to use **Reboot**, you'll need to add to your `app.razor`, `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 `\u003chead\u003e` section:\n\n```html    \n\u003clink href=\"/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css\" rel=\"stylesheet\" /\u003e\n```\n\nWhen using the templates to create your application, **Reboot** is already set-up for you.\n\n_When creating a site that is hosted in a different base path,it might be necessary to remove the leading '/' from the stylesheet link._\n\n### Register Services\nAdd the following in `Program.cs`\n\n```csharp\nbuilder.Services.AddFluentUIComponents();\n```\n\nIf you're running your application on **Blazor Server**, make sure a default `HttpClient` is registered before the `AddFluentUIComponents` method.\n\n```csharp\nbuilder.Services.AddHttpClient();\n```\n\n### Add Component Providers\nAdd the following components at the end of your `MainLayout.razor` file.  \nThese providers are used by associated services to display Toasts, Dialog boxes, Tooltips or Message Bars correctly.\n\n```xml\n\u003cFluentToastProvider /\u003e\n\u003cFluentDialogProvider /\u003e\n\u003cFluentTooltipProvider /\u003e\n\u003cFluentMessageBarProvider /\u003e\n\u003cFluentMenuProvider /\u003e\n```\n\u003e **note:** You can remove providers which you are using in your application.\n\n## Working with Icons and Emoji\nWe have additional packages available that include the complete Fluent UI System icons and Fluent UI Emoji collections. \nPlease refer to the [Icons and Emoji](https://www.fluentui-blazor.net/IconsAndEmoji) page for more information.\n\n## Usage\nWith the package installed, you can begin using the Fluent UI Blazor library components in the same way as any other Razor component. \n\n### Add Imports\n\nAfter the package is added, you need to add the following in your  `_Imports.razor`\n\n```razor\n@using Microsoft.FluentUI.AspNetCore.Components\n```\n\n### Quick Start\nThis is literally all you need in your views to use Fluent UI Blazor library in your application.\n\n```xml\n\u003cFluentCard\u003e\n  \u003ch2\u003eHello World!\u003c/h2\u003e\n  \u003cFluentButton Appearance=\"@Appearance.Accent\"\u003eClick Me\u003c/FluentButton\u003e\n\u003c/FluentCard\u003e\n```\n\n## Configuring the Design System\nThe Fluent UI Razor components are built on FAST's (Adaptive UI) technology, which enables design customization and personalization, while automatically\nmaintaining 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](https://www.fluentui-blazor.net/DesignTokens) page.\n\n## Blazor Hybrid\nYou 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 one extra steps (for now) described below.\n\n### Temporary workaround for MAUI/WPF/Windows Forms issues\n\n\u003e [!NOTE]\n\u003e The workaround below only applies to .NET 8. As of .NET 9 this workaround is no longer needed. If you have this workaround in place for .NET 9 your Blazor Hybrid project **will not load**.\n\nCurrently when using the WebView to run Blazor (so all Hybrid variants) the web-components script is not imported automatically (see [#404](https://github.com/microsoft/fluentui-blazor/issues/404)). \nThere 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\t`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:\n\n```xml\n\u003cscript app-name=\"{NAME OF YOUR APP}\" src=\"./_content/Microsoft.FluentUI.AspNetCore.Components/js/initializersLoader.webview.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"_framework/blazor.webview.js\"\u003e\u003c/script\u003e\n```\n\nThe `app-name` attribute needs to match your app's assembly name - initializersLoader uses 'app-name' to resolve name of the file with initializers.\ninitializersLoader 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.\n\nFor more information regarding the bug, see issue [15234](https://github.com/dotnet/maui/issues/15234) in the MAUI repo.\n\t\n## Use the DataGrid component with EF Core or OData Client\nIf you want to use the `\u003cFluentDataGrid\u003e` with data provided through EF Core or an OData Client, you need to install an additional package so the grid knows how to resolve queries asynchronously for efficiency.\nPlease see the [DataGrid](https://www.fluentui-blazor.net/DataGrid) page for more information.\n\n\n## Additional resources\n* The Microsoft Fluent UI Blazor library [documentation and demo site](https://www.fluentui-blazor.net)\n\n## Support\nThe Microsoft Fluent UI Blazor library is an open source project and is **not** an official part of ASP.NET Core, which means it’s **not** officially\nsupported and isn’t committed to ship updates as part of any official .NET updates. It is built and maintained by Microsoft employees (**and** other contributors)\nand offers support, like most other open source projects, on a best effort base through the GitHub repository **only**.\n\n## Contributing to the project\n\nWe offer some guidelines on how you can get started [contributing to the project](https://github.com/microsoft/fluentui-blazor/blob/main/docs/contributing.md). \nWe also have a document that explains and shows how to [write and develop unit tests](https://github.com/microsoft/fluentui-blazor/blob/main/docs/unit-tests.md)\n\n### 🏆 Contributors\n\n\u003ca href=\"https://github.com/microsoft/fluentui-blazor/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=microsoft/fluentui-blazor\" /\u003e\n\u003c/a\u003e\n\nMade with [contrib.rocks](https://contrib.rocks).\n\n## Joining the Community\n\nLooking to get answers to questions or engage with us in real-time? Our community is active on [Discord](https://discord.gg/FcSNfg4). Submit requests \nand issues on [GitHub](https://github.com/microsoft/fluentui-blazor/issues/new/choose), or join us by contributing on [some good first issues via GitHub](https://github.com/microsoft/fluentui-blazor/labels/community:good-first-issue).\n\nWe look forward to building an amazing open source community with you!\n\n## Contact\n\n* Join the DotNetEvolution server and chat with us in real-time on [Discord](https://discord.gg/M5cBTfp6J2). \n* Submit requests and issues (only) on [GitHub](https://github.com/microsoft/fluentui-blazor/issues/new/choose).\n* Contribute by helping out on some of our recommended first issues on [GitHub](https://github.com/microsoft/fluentui-blazor/labels/community:good-first-issue).\n","funding_links":[],"categories":["C#","C\\#","web-components","C# #"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicrosoft%2Ffluentui-blazor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmicrosoft%2Ffluentui-blazor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicrosoft%2Ffluentui-blazor/lists"}