fluentui-blazor

Integrate Microsoft.FluentUI.AspNetCore.Components in Blazor applications with providers and theming.

Updated Mar 8, 2026
One-click install
npx skills add https://github.com/markarnoldutah/RVS --skill fluentui-blazor-markarnoldutah
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: fluentui-blazor
Source: https://github.com/markarnoldutah/RVS/tree/main/.github/skills/fluentui-blazor
Command: npx skills add https://github.com/markarnoldutah/RVS --skill fluentui-blazor-markarnoldutah

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidance on effectively integrating and utilizing the Microsoft Fluent UI Blazor component library within Blazor applications, addressing common setup and usage challenges.

Core Features & Use Cases

  • Component Integration: Learn how to correctly add Fluent UI Blazor components to your Blazor projects.
  • Provider Configuration: Understand the necessity and implementation of various providers (Toast, Dialog, etc.) for component functionality.
  • Iconography: Master the use of strongly-typed icons from the dedicated NuGet package.
  • Data Binding: Correctly bind data to components like FluentSelect and FluentAutocomplete.
  • Dialogs and Toasts: Implement custom dialogs and notifications using the provided services.
  • Theming: Configure design tokens and themes for a consistent UI.
  • Use Case: A developer is building a Blazor application and needs to implement a data grid with sorting and filtering, a modal dialog for user input, and custom toast notifications. This Skill will guide them through setting up the necessary providers, registering services, and using the specific components correctly.

Quick Start

Use the fluentui-blazor skill to add the necessary providers to your Blazor application's root layout.

Frequently Asked Questions about fluentui-blazor

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up Fluent UI Blazor components in my application?

To set up Fluent UI Blazor components, you must install the Microsoft.FluentUI.AspNetCore.Components NuGet package, register the required services, and place the necessary provider components in your root layout. This ensures full functionality for dialogs and toasts.

Why are my Fluent UI Blazor dialogs and toasts not displaying?

Fluent UI Blazor dialogs and toasts fail to display when required provider components are missing from the root layout. You must add the specific Toast and Dialog providers to your application's main layout to resolve these common JS interop errors.

How do I bind data to a FluentSelect or FluentAutocomplete component in Blazor?

Binding data to FluentSelect and FluentAutocomplete components in Blazor requires using the correct data binding patterns provided by the Microsoft.FluentUI.AspNetCore.Components package to ensure proper synchronization with your data source.

Can I use strongly-typed icons with Fluent UI Blazor?

Yes, you can use strongly-typed icons with Fluent UI Blazor by installing the dedicated icon NuGet package. This allows you to reference icons securely in your C# code without relying on string-based names.

What is the best way to configure theming and design tokens in Blazor?

The best way to configure theming in Blazor is by using the Fluent UI design tokens. This approach allows you to establish a consistent UI across your application by customizing the global provider settings.

How do I implement a data grid with sorting and filtering in Blazor?

Implementing a data grid with sorting and filtering in Blazor involves utilizing the Fluent UI data grid component. This requires proper service registration and configuring the grid's data binding properties to handle user interactions.