Fluent UI Blazor - Consumer Usage Guide

Comprehensive guide for building Blazor apps with Microsoft Fluent UI components.

- Covers setup (service registration, mandatory providers), component patterns (lists, dialogs, forms), and icons via a separate NuGet package with strongly-typed variants and sizes

- Explains critical patterns: FluentSelect/FluentAutocomplete use Items, OptionText, and SelectedOption binding (not <option> children), and dialogs use IDialogService with content components, not visibility toggling

- Provides service injection examples for toasts, dialogs, and message bars; clarifies ServiceLifetime rules (Scoped for Server/Interactive, Singleton for WebAssembly)

- Warns against common mistakes: manual <script>/<link> tags, setting design tokens before render, and using FluentEditForm outside wizard contexts

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).