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

Related skills

More from github/awesome-copilot

Installs
8.6K
GitHub Stars
33.5K
First Seen
Feb 18, 2026