skilld
All skills
github avatar

/fluentui-blazor

@c824a3c official
by githubgithub/awesome-copilot40k stars
5,040

Guide for using the Microsoft Fluent UI Blazor component library (Microsoft.FluentUI.AspNetCore.Components NuGet package) in Blazor applications. Use this when the user is building a Blazor app with Fluent UI components, setting up the library, using FluentUI components like FluentButton, FluentDataGrid, FluentDialog, FluentToast, FluentNavMenu, FluentTextField, FluentSelect, FluentAutocomplete, FluentDesignTheme, or any component prefixed with "Fluent". Also use when troubleshooting missing providers, JS interop issues, or theming.

Ask your Agent

Use this Skill: https://skilld.dev/gh/github/awesome-copilot/fluentui-blazor

This session only. Nothing lands on disk.

referencesSETUP.md

≈1.2k tokens on demand. Your agent reads this file only when SKILL.md points to it.

Setup and Configuration

NuGet Packages

Package Purpose
Microsoft.FluentUI.AspNetCore.Components Core component library (required)
Microsoft.FluentUI.AspNetCore.Components.Icons Icon package (optional, recommended)
Microsoft.FluentUI.AspNetCore.Components.Emojis Emoji package (optional)
Microsoft.FluentUI.AspNetCore.Components.DataGrid.EntityFrameworkAdapter EF Core adapter for DataGrid (optional)
Microsoft.FluentUI.AspNetCore.Components.DataGrid.ODataAdapter OData adapter for DataGrid (optional)

Program.cs Registration

builder.Services.AddFluentUIComponents();

Configuration Options (LibraryConfiguration)

Property Type Default Notes
UseTooltipServiceProvider bool true Registers ITooltipService. If true, you MUST add <FluentTooltipProvider> to layout
RequiredLabel MarkupString Red * Custom markup for required field indicators
HideTooltipOnCursorLeave bool false Close tooltip when cursor leaves both anchor and tooltip
ServiceLifetime ServiceLifetime Scoped Only Scoped or Singleton. Transient throws!
ValidateClassNames bool true Validates CSS class names against ^-?[_a-zA-Z]+[_a-zA-Z0-9-]*$
CollocatedJavaScriptQueryString Func<string, string>? v={version} Cache-busting for JS files

ServiceLifetime by hosting model

Hosting model ServiceLifetime
Blazor Server Scoped (default)
Blazor WebAssembly Standalone Singleton
Blazor Web App (Interactive) Scoped (default)
Blazor Hybrid (MAUI) Singleton

MainLayout.razor Template

@inherits LayoutComponentBase

<FluentLayout>
    <FluentHeader Height="50">
        My App
    </FluentHeader>

    <FluentStack Orientation="Orientation.Horizontal" HorizontalGap="0" Style="height: 100%;">
        <FluentNavMenu Width="250" Collapsible="true" Title="Navigation">
            <FluentNavLink Href="/" Icon="@(Icons.Regular.Size20.Home)" Match="NavLinkMatch.All">Home</FluentNavLink>
            <FluentNavLink Href="/counter" Icon="@(Icons.Regular.Size20.NumberSymbol)">Counter</FluentNavLink>
            <FluentNavGroup Title="Settings" Icon="@(Icons.Regular.Size20.Settings)">
                <FluentNavLink Href="/settings/general">General</FluentNavLink>
                <FluentNavLink Href="/settings/profile">Profile</FluentNavLink>
            </FluentNavGroup>
        </FluentNavMenu>

        <FluentBodyContent>
            <FluentStack Orientation="Orientation.Vertical" Style="padding: 1rem;">
                @Body
            </FluentStack>
        </FluentBodyContent>
    </FluentStack>
</FluentLayout>

@* Required providers — place after FluentLayout *@
<FluentToastProvider />
<FluentDialogProvider />
<FluentMessageBarProvider />
<FluentTooltipProvider />
<FluentKeyCodeProvider />

@* Theme — place at root *@
<FluentDesignTheme Mode="DesignThemeModes.System"
                   OfficeColor="OfficeColor.Teams"
                   StorageName="mytheme" />

Or use the convenience component:

<FluentMainLayout Header="@header"
                  NavMenuContent="@navMenu"
                  Body="@body"
                  HeaderHeight="50"
                  NavMenuWidth="250"
                  NavMenuTitle="Navigation" />

@code {
    private RenderFragment header = @<span>My App</span>;
    private RenderFragment navMenu = @<div>
        <FluentNavLink Href="/">Home</FluentNavLink>
    </div>;
    private RenderFragment body = @<div>@Body</div>;
}

_Imports.razor

Add this to your _Imports.razor:

@using Microsoft.FluentUI.AspNetCore.Components
@using Icons = Microsoft.FluentUI.AspNetCore.Components.Icons

Static Web Assets

No manual <link> or <script> tags are needed. The library uses:

  • CSS: reboot.css (normalization) + component-scoped CSS — auto-loaded via static web assets
  • JS: lib.module.js — auto-loaded via Blazor's JS initializer system
  • Component-specific JS (e.g. DataGrid, Autocomplete) — lazy-loaded on demand

All served from _content/Microsoft.FluentUI.AspNetCore.Components/.

Services Registered

Services automatically registered by AddFluentUIComponents():

Service Implementation Purpose
GlobalState GlobalState Shared application state
IToastService ToastService Toast notifications (needs FluentToastProvider)
IDialogService DialogService Dialogs and panels (needs FluentDialogProvider)
IMessageService MessageService Message bars (needs FluentMessageBarProvider)
IKeyCodeService KeyCodeService Keyboard shortcuts (needs FluentKeyCodeProvider)
IMenuService MenuService Context menus
ITooltipService TooltipService Tooltips (needs FluentTooltipProvider, opt-in via UseTooltipServiceProvider)

Source: SKILL.md on GitHub

Third-party checks

1 warning16d5 checks · Risk SAFE
  • Gen Agent Trust Hub16d

    The skill is a legitimate guide for Microsoft's Fluent UI Blazor component library. It provides detailed documentation on setup, configuration, and usage of various UI components without any malicious patterns.

  • Socket16d

    No alerts

  • Snyk16d

    Risk: LOW · No issues

  • Runlayer7mo

    5/5 files flagged

  • ZeroLeaks5mo

    Score: 93/100 · 2 sections analyzed

Provenance

Signed by skilld at c824a3c. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 20 hours ago.

Activeupdated 8 months ago

Topics

  • TypeScript
  • blazor
  • fluentui
  • aspnet
  • components
  • forms
  • dialogs
  • theming

README badge

README badge for github/awesome-copilot/fluentui-blazor

What it does

Teaches how to use the Microsoft.FluentUI.AspNetCore.Components NuGet package in Blazor applications, covering component setup, service providers, icon usage, list binding patterns, dialogs, toasts, and theming. Addresses common pitfalls like manual script tags, missing providers, and incorrect form patterns specific to Fluent UI Blazor components.

Generated from the current SKILL.md.

Frequently asked

Do I need to manually add script or link tags for Fluent UI?
No. The library auto-loads all CSS and JS via Blazor's static web assets and JS initializers. Manual script or link tags are not needed.
What providers must I add to my layout?
FluentToastProvider, FluentDialogProvider, FluentMessageBarProvider, FluentTooltipProvider, and FluentKeyCodeProvider must be added to your root layout (e.g. MainLayout.razor) for their corresponding services to work without silent failures.
How do I use icons with Fluent UI Blazor?
Install the separate Microsoft.FluentUI.AspNetCore.Components.Icons NuGet package, then use strongly-typed icon classes via the pattern Icons.[Variant].[Size].[Name], e.g. Icons.Regular.Size24.Save. String-based icon names are not supported.
What ServiceLifetime should I use when registering AddFluentUIComponents?
Use ServiceLifetime.Scoped for Blazor Server or Interactive (default), or ServiceLifetime.Singleton for Blazor WebAssembly standalone. Transient is not supported and throws NotSupportedException.
How do FluentSelect and FluentAutocomplete differ from InputSelect?
They use Items, OptionText, and OptionValue properties instead of option child elements. FluentAutocomplete also requires an OnOptionsSearch callback to filter options and uses ValueText instead of the obsolete Value property.

Generated from the current SKILL.md. These answers refresh after source changes.