Do I need to manually add script or link tags for the core library?

No, the Microsoft.FluentUI.AspNetCore.Components library auto-loads CSS and JS via Blazor's static web assets and JS initializers.

When should I configure design tokens and themes?

Design tokens rely on JS interop, so they must be configured in the OnAfterRenderAsync lifecycle method rather than OnInitialized.

Why are my toasts or dialogs not appearing even though the code runs?

You must add the mandatory provider components, such as and , to your root layout (e.g., MainLayout.razor).

How do I use icons in Fluent UI Blazor?

Icons require a separate NuGet package (Microsoft.FluentUI.AspNetCore.Components.Icons) and are accessed as strongly-typed classes using the Pattern: Icons.[Variant].[Size].[Name].

Fluent UI Blazor Guide

Name: Fluent UI Blazor Guide
Author: rodolfolermacontreras

byrodolfolermacontreras

•

Herramientas de Diseño

Streamlines the integration of Microsoft's Fluent UI component library into Blazor applications using best practices and official patterns.

This skill provides specialized implementation guidance for the Microsoft.FluentUI.AspNetCore.Components library, ensuring developers build professional, accessible interfaces that align with Microsoft's design language. It automates the complex setup of service providers, manages strongly-typed icon sets, and enforces correct data-binding patterns for list and autocomplete components. By following this guide, developers can avoid common pitfalls related to JS interop timing, service lifetimes, and the specific architecture of Fluent UI's dialog and notification systems.

Características Principales

01Advanced data binding for Select, Combobox, and Autocomplete

02Automated service registration and root provider setup

031 GitHub stars

04Strongly-typed icon integration and custom image handling

05Design token and theme synchronization via JS interop

06Service-based Dialog and Toast notification patterns

Casos de Uso

01Building enterprise-grade Blazor dashboards with Microsoft design standards

02Migrating standard Blazor forms to Fluent UI with custom validation styling

03Implementing complex modal-driven workflows using the IDialogService

Características Principales

01Advanced data binding for Select, Combobox, and Autocomplete

02Automated service registration and root provider setup

031 GitHub stars

04Strongly-typed icon integration and custom image handling

05Design token and theme synchronization via JS interop

06Service-based Dialog and Toast notification patterns

Casos de Uso

01Building enterprise-grade Blazor dashboards with Microsoft design standards

02Migrating standard Blazor forms to Fluent UI with custom validation styling

03Implementing complex modal-driven workflows using the IDialogService