fluentui-blazor
Installation
Summary
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/FluentAutocompleteuseItems,OptionText, andSelectedOptionbinding (not<option>children), and dialogs useIDialogServicewith content components, not visibility toggling - Provides service injection examples for toasts, dialogs, and message bars; clarifies
ServiceLifetimerules (Scoped for Server/Interactive, Singleton for WebAssembly) - Warns against common mistakes: manual
<script>/<link>tags, setting design tokens before render, and usingFluentEditFormoutside wizard contexts
SKILL.md
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).