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.

referencesLAYOUT-AND-NAVIGATION.md

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

Layout and Navigation

Layout Components

FluentLayout

Root layout container. Use as the outermost structural component.

<FluentLayout Orientation="Orientation.Vertical">
    <FluentHeader>...</FluentHeader>
    <FluentBodyContent>...</FluentBodyContent>
    <FluentFooter>...</FluentFooter>
</FluentLayout>

FluentHeader / FluentFooter

Sticky header and footer sections within FluentLayout.

<FluentHeader Height="50">
    <FluentStack Orientation="Orientation.Horizontal" HorizontalAlignment="HorizontalAlignment.SpaceBetween">
        <span>App Title</span>
        <FluentButton>Settings</FluentButton>
    </FluentStack>
</FluentHeader>

FluentBodyContent

Main scrollable content area within FluentLayout.

FluentStack

Flexbox container for horizontal or vertical layouts.

<FluentStack Orientation="Orientation.Horizontal"
             HorizontalGap="10"
             VerticalGap="10"
             HorizontalAlignment="HorizontalAlignment.Center"
             VerticalAlignment="VerticalAlignment.Center"
             Wrap="true"
             Width="100%">
    <FluentButton>One</FluentButton>
    <FluentButton>Two</FluentButton>
</FluentStack>

Parameters: Orientation, HorizontalGap, VerticalGap, HorizontalAlignment, VerticalAlignment, Wrap, Width.

FluentGrid / FluentGridItem

12-column responsive grid system.

<FluentGrid Spacing="3" Justify="JustifyContent.Center" AdaptiveRendering="true">
    <FluentGridItem xs="12" sm="6" md="4" lg="3">
        Card 1
    </FluentGridItem>
    <FluentGridItem xs="12" sm="6" md="4" lg="3">
        Card 2
    </FluentGridItem>
</FluentGrid>

Size parameters (xs, sm, md, lg, xl, xxl) represent column spans out of 12. Use AdaptiveRendering="true" to hide items that don't fit.

FluentMainLayout (convenience)

Pre-composed layout with header, nav menu, and body area.

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

Navigation Components

FluentNavMenu

Collapsible navigation menu with keyboard support.

<FluentNavMenu Width="250"
               Collapsible="true"
               @bind-Expanded="@menuExpanded"
               Title="Main navigation"
               CollapsedChildNavigation="true"
               Margin="4px 0">
    <FluentNavLink Href="/" Icon="@(Icons.Regular.Size20.Home)" Match="NavLinkMatch.All">
        Home
    </FluentNavLink>
    <FluentNavLink Href="/counter" Icon="@(Icons.Regular.Size20.NumberSymbol)">
        Counter
    </FluentNavLink>
    <FluentNavGroup Title="Admin" Icon="@(Icons.Regular.Size20.Shield)" @bind-Expanded="@adminExpanded">
        <FluentNavLink Href="/admin/users">Users</FluentNavLink>
        <FluentNavLink Href="/admin/roles">Roles</FluentNavLink>
    </FluentNavGroup>
</FluentNavMenu>

Key parameters:

  • Width — width in pixels (40px when collapsed)
  • Collapsible — enables expand/collapse toggle
  • Expanded / ExpandedChanged — bindable collapse state
  • CollapsedChildNavigation — shows flyout menus for groups when collapsed
  • CustomToggle — for mobile hamburger button patterns
  • Title — aria-label for accessibility

FluentNavGroup

Expandable group within a nav menu.

<FluentNavGroup Title="Settings"
                Icon="@(Icons.Regular.Size20.Settings)"
                @bind-Expanded="@settingsExpanded"
                Gap="2">
    <FluentNavLink Href="/settings/general">General</FluentNavLink>
    <FluentNavLink Href="/settings/profile">Profile</FluentNavLink>
</FluentNavGroup>

Parameters: Title, Expanded/ExpandedChanged, Icon, IconColor, HideExpander, Gap, MaxHeight, TitleTemplate.

FluentNavLink

Navigation link with active state tracking.

<FluentNavLink Href="/page"
               Icon="@(Icons.Regular.Size20.Document)"
               Match="NavLinkMatch.Prefix"
               Target="_blank"
               Disabled="false">
    Page Title
</FluentNavLink>

Parameters: Href, Target, Match (NavLinkMatch.Prefix default, or All), ActiveClass, Icon, IconColor, Disabled, Tooltip.

All nav components inherit from FluentNavBase which provides: Icon, IconColor, CustomColor, Disabled, Tooltip.

FluentBreadcrumb / FluentBreadcrumbItem

<FluentBreadcrumb>
    <FluentBreadcrumbItem Href="/">Home</FluentBreadcrumbItem>
    <FluentBreadcrumbItem Href="/products">Products</FluentBreadcrumbItem>
    <FluentBreadcrumbItem>Current Page</FluentBreadcrumbItem>
</FluentBreadcrumb>

FluentTab / FluentTabs

<FluentTabs @bind-ActiveTabId="@activeTab">
    <FluentTab Id="tab1" Label="Details">
        Details content
    </FluentTab>
    <FluentTab Id="tab2" Label="History">
        History content
    </FluentTab>
</FluentTabs>

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.