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, FluentData

Fluent UI Blazor — Consumer Usage Guide This skill teaches how to correctly use the Microsoft.FluentUI.AspNetCore.Components (version 4) NuGet package in Blazor applications. Critical Rules 1. No manual <script or <link tags needed The library auto loads all CSS and JS via Blazor's static web assets and JS initializers. Never tell users to add <script or <link tags for the core library. 2. Providers are mandatory for service based components These provider components MUST be added to the root layout (e.g. MainLayout.razor ) for their corresponding services to work. Without them, service calls fail silently (no error, no UI). 3. Service registration in Program.cs ServiceLifetime rules: ServiceLifetime.Scoped — for Blazor Server / Interactive (default) ServiceLifetime.Singleton — for Blazor WebAssembly standalone ServiceLifetime.Transient — throws NotSupportedException 4. Icons require a separate NuGet package Usage with a @using alias: Pattern: Icons.[Variant].[Size].[Name] Variants: Regular , Filled Sizes: Size12 , Size16 , Size20 , Size24 , Size28 , Size32 , Size48 Custom image: Icon.FromImageUrl("/path/to/image.png") Never use string based icon names — icons are strongly typed classes. 5. List component binding model FluentSelect<TOption , FluentCombobox<TOption , FluentListbox<TOption , and FluentAutocomplete<TOption do NOT work like <InputSelect . They use: Items — the data source ( IEnumerable<TOption ) OptionText — Func<TOption, string? to extract display text OptionValue — Func<TOption, string? to extract the value string SelectedOption / SelectedOptionChanged — for single selection binding SelectedOptions / SelectedOptionsChanged — for multi selection binding NOT like this (wrong pattern): 6. FluentAutocomplete specifics Use ValueText (NOT Value — it's obsolete) for the search input text OnOptionsSearch is the required callback to filter options Default is Multiple="true" 7. Dialog service pattern Do NOT toggle visibility of <FluentDialog tags. The service pattern is: 1. Create a content component implementing IDialogContentComponent<TData : 2. Show the dialog via IDialogService : For convenience dialogs: 8. Toast notifications FluentToastProvider parameters: Position (default TopRight ), Timeout (default 7000ms), MaxToastCount (default 4). 9. Design tokens and themes work only after render Design tokens rely on JS interop. Never set them in OnInitialized — use OnAfterRenderAsync . 10. FluentEditForm vs EditForm FluentEditForm is only needed inside FluentWizard steps (per step validation). For regular forms, use standard EditForm with Fluent form components: Use FluentValidationMessage and FluentValidationSummary instead of standard Blazor validation components for Fluent styling. Reference files For detailed guidance on specific topics, see: [Setup and configuration](references/SETUP.md) [Layout and navigation](references/LAYOUT AND NAVIGATION.md) [Data grid](references/DATAGRID.md) [Theming](references/THEMING.md)

fluentui-blazor