Fluent UI Blazor

https://fluentui-blazor-v5.azurewebsites.net/
Admin
Fluent UI Blazor is a library that provides a robust and extensive set of Blazor components,...
Tokens:548,552
Snippets:3,460
Trust Score:7.7
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Immediate Mode Example

Source: https://fluentui-blazor-v5.azurewebsites.net/Number

Example demonstrating the Immediate and ImmediateDelay parameters of FluentNumberInput.

```APIDOC
## Immediate Mode

### Description
Set `Immediate="true"` to update the value associated with each keystroke, rather than when focus is lost. Use `ImmediateDelay` to debounce rapid input. This parameter only applies when the user types digits directly. When using the up/down buttons or arrow keys, the value is always updated immediately regardless of this setting.

### Example
```razor
<FluentNumberInput Label="@($"Value = {Value}")"
              Immediate="true"
              ImmediateDelay="400"
              @bind-Value="@Value" />

@code
{
    int Value = 42;
}
```
```

--------------------------------

### Install ODataAdapter package

Source: https://fluentui-blazor-v5.azurewebsites.net/DataGrid

Run this command to install the Microsoft.FluentUI.AspNetCore.Components.DataGrid.ODataAdapter package, required for OData support.

```bash
dotnet add package Microsoft.FluentUI.AspNetCore.Components.DataGrid.ODataAdapter

```

--------------------------------

### Run MCP server with dnx

Source: https://fluentui-blazor-v5.azurewebsites.net/Mcp/Installation

Starts the Fluent UI Blazor MCP server using the dnx tool without a global install. Run this command from a terminal.

```bash
dnx Microsoft.FluentUI.AspNetCore.McpServer

```

--------------------------------

### Install MCP Server with dotnet tool

Source: https://fluentui-blazor-v5.azurewebsites.net/Mcp/GetStarted

Install the Fluent UI Blazor MCP Server as a global .NET tool. The first command installs the stable release; the second installs the prerelease version. Use `dotnet tool update -g Microsoft.FluentUI.AspNetCore.McpServer` to update the server.

```bash
dotnet tool install -g Microsoft.FluentUI.AspNetCore.McpServer
```

```bash
dotnet tool install -g Microsoft.FluentUI.AspNetCore.McpServer --prerelease
```

--------------------------------

### Write a FluentDataGrid Prompt Template

Source: https://fluentui-blazor-v5.azurewebsites.net/Mcp/Prompts

Example prompt template for generating a FluentDataGrid component. Place this content in a file like .prompts/fluent-datagrid.md to guide AI assistants in creating the component.

```markdown
# Create a Fluent UI DataGrid

## Context
I need to create a data grid using FluentDataGrid component.

## Requirements
- Data source: [describe your data]
- Columns needed: [list columns]
- Features: [sorting/filtering/pagination]

## Expected Output
Please provide:
1. Complete Razor component code
2. C# code-behind for data loading
3. Any required CSS for custom styling

```

--------------------------------

### Install MCP server from official NuGet feed

Source: https://fluentui-blazor-v5.azurewebsites.net/Mcp/Security

Install the FluentUI.Blazor.McpServer tool globally using the official NuGet feed only.

```bash
# Use official NuGet feed only
dotnet tool install FluentUI.Blazor.McpServer --global

```

--------------------------------

### Request complete examples with @code section

Source: https://fluentui-blazor-v5.azurewebsites.net/Mcp/Examples

Example of requesting a complete example that includes the @code section, ensuring the AI provides a full working example.

```text
✅ "Show me a complete working example including the @code section"

```

--------------------------------

### GetDocumentationTopic

Source: https://fluentui-blazor-v5.azurewebsites.net/Mcp/Tools

Get documentation for a specific topic. Use this to get full installation guides, migration instructions, localization setup, or styling documentation.

```APIDOC
## GetDocumentationTopic

### Description
Get documentation for a specific topic. Use this to get full installation guides, migration instructions, localization setup, or styling documentation.

### Parameters
- **topicName** (string) - Required - The name or route of the topic (e.g., 'Installation', 'Localization', 'Styles', 'Migrating to v5', 'Default Values').

### Returns
- **string** - Documentation for the requested topic.
```

--------------------------------

### Install EF Core adapter package

Source: https://fluentui-blazor-v5.azurewebsites.net/DataGrid

Install the EF Core adapter package for FluentDataGrid to enable asynchronous query resolution.

```bash
dotnet add package Microsoft.FluentUI.AspNetCore.Components.DataGrid.EntityFrameworkAdapter

```

--------------------------------

### Ask follow-up questions for FluentButton parameters

Source: https://fluentui-blazor-v5.azurewebsites.net/Mcp/Examples

Example of asking follow-up questions in a conversation with the AI. Shows a user asking for FluentButton parameters, receiving a list, and then asking for an example with the Loading state.

```text
User: "Show me FluentButton parameters"
AI: [provides list]
User: "Now show me an example with the Loading state"

```

--------------------------------

### Install OData Adapter Package

Source: https://fluentui-blazor-v5.azurewebsites.net/DataGrid

Command to install the Microsoft.FluentUI.AspNetCore.Components.DataGrid.ODataAdapter NuGet package, required for using FluentDataGrid with OData.

```APIDOC
## Install OData Adapter Package

### Description
Install the package required for using FluentDataGrid with OData data sources.

### Command
```
dotnet add package Microsoft.FluentUI.AspNetCore.Components.DataGrid.ODataAdapter
```
```

--------------------------------

### Button Size Examples (Small, Medium, Large) with Icons

Source: https://fluentui-blazor-v5.azurewebsites.net/Buttons/Button

Demonstrates FluentButton with Size set to Small, Medium, and Large. Each size includes variants with a start icon (IconStart) and an icon-only button (IconOnly) using FluentIcon. The buttons are arranged in FluentStack containers with vertical and horizontal gaps.

```razor
<FluentStack Orientation="Orientation.Vertical" VerticalGap="15">
    <FluentStack HorizontalGap="10" Wrap="true">
        <FluentButton Size="ButtonSize.Small">Small</FluentButton>
        <FluentButton Size="ButtonSize.Small" IconStart="@(new Icons.Regular.Size16.Globe())">
            Small with globe icon
        </FluentButton>
        <FluentButton Size="ButtonSize.Small"
                      IconOnly="true"
                      Title="Small icon only button">
            <FluentIcon Value="@(new Icons.Regular.Size16.Globe())" />
        </FluentButton>
    </FluentStack>

    <FluentStack HorizontalGap="10" Wrap="true">
        <FluentButton Size="ButtonSize.Medium">Medium</FluentButton>
        <FluentButton Size="ButtonSize.Medium" IconStart="@(new Icons.Regular.Size20.Globe())">
            Medium with globe icon
        </FluentButton>
        <FluentButton Size="ButtonSize.Medium"
                      IconOnly="true"
                      Title="Medium icon only button">
            <FluentIcon Value="@(new Icons.Regular.Size20.Globe())" />
        </FluentButton>
    </FluentStack>

    <FluentStack HorizontalGap="10" Wrap="true">
        <FluentButton Size="ButtonSize.Large">Large</FluentButton>
        <FluentButton Size="ButtonSize.Large" IconStart="@(new Icons.Regular.Size24.Globe())">
            Large with globe icon
        </FluentButton>
        <FluentButton Size="ButtonSize.Large"
                      IconOnly="true"
                      Title="Large icon only button">
            <FluentIcon Value="@(new Icons.Regular.Size24.Globe())" />
        </FluentButton>
    </FluentStack>
</FluentStack>

```

--------------------------------

### FluentTimePicker migration example

Source: https://fluentui-blazor-v5.azurewebsites.net/Migration/DateTime

Migration example for FluentTimePicker. V4 uses TimeDisplay; V5 requires TValue and uses StartHour, EndHour, and Increment to configure the new combobox-based time slots.

```markup
<!-- V4 -->
<FluentTimePicker @bind-Value="selectedTime" TimeDisplay="TimeDisplay.HourMinute" />

<!-- V5 -->
<FluentTimePicker TValue="DateTime?" @bind-Value="selectedTime"
                  StartHour="8" EndHour="18" Increment="15" />

```

--------------------------------

### GetComponentDetails

Source: https://fluentui-blazor-v5.azurewebsites.net/Mcp/Tools

Gets detailed documentation for a specific Fluent UI Blazor component, including usage guide, code examples, parameters, events, and methods.

```APIDOC
## GetComponentDetails

### Description
Gets detailed documentation for a specific Fluent UI Blazor component, including usage guide, code examples, parameters, events, and methods.

### Parameters
- **componentName** (string) - Required - The name of the component (e.g., 'FluentButton', 'FluentDataGrid', 'FluentTextField'). You can omit the 'Fluent' prefix.

### Returns
- **string** - Detailed documentation for the component.
```

--------------------------------

### ToTimeAgo() usage example

Source: https://fluentui-blazor-v5.azurewebsites.net/DateTime/Extensions

Creates a TimeSpan of 5 minutes and calls ToTimeAgo() to get a relative time string. The result is '5 minutes ago'.

```csharp
var delay = TimeSpan.FromMinutes(5);

// 5 minutes ago
var message = delay.ToTimeAgo();

```

--------------------------------

### ListDocumentation

Source: https://fluentui-blazor-v5.azurewebsites.net/Mcp/Tools

Lists all available documentation topics for Fluent UI Blazor. Use this to discover installation guides, migration information, localization, and styling documentation.

```APIDOC
## ListDocumentation

### Description
Lists all available documentation topics for Fluent UI Blazor. Use this to discover installation guides, migration information, localization, and styling documentation.

### Parameters
None.

### Returns
- **string** - List of documentation topics.
```

--------------------------------

### Open a dialog with options and parameters

Source: https://fluentui-blazor-v5.azurewebsites.net/Dialog

Full example showing how to open a dialog with configurable modal, size, and alignment options. Pass parameters to the dialog and handle the result, including cancellation and state change events.

```razor
@inject IDialogService DialogService

<FluentStack HorizontalGap="24px"
             Wrap="true">
    
    <FluentSwitch @bind-Value="@IsModal"
                  Label="Is Modal"
                  LabelPosition="LabelPosition.Above" />

    <FluentSelect Items="@AllSizes"
                  Label="Size"
                  @bind-Value="@Size" />

    <FluentSelect Items="@AllAlignments"
                  Label="Alignment"
                  @bind-Value="@Alignment" />
</FluentStack>

<FluentButton OnClick="@OpenDialogAsync"
              Appearance="ButtonAppearance.Primary">Open Dialog</FluentButton>

<hr />
<div>
    John: @John
</div>

@code
{
    private bool IsModal = true;
    private DialogSize? Size;
    private DialogAlignment? Alignment;
    private Dialog.PersonDetails John = new() { Age = "20" };

    private async Task OpenDialogAsync()
    {
        var result = await DialogService.ShowDialogAsync<Dialog.SimpleDialog>(options =>
        {
            options.Modal = IsModal;
            options.Size = Size;
            options.Alignment = Alignment;

            options.Parameters.Add(nameof(Dialog.SimpleDialog.Name), "John"); // Simple type
            options.Parameters.Add(nameof(Dialog.SimpleDialog.Person), John); // Updatable object

            options.OnStateChange = (e) =>
            {
                Console.WriteLine($"State changed: {e.State}");
            };
        });

        if (result.Cancelled)
        {
            Console.WriteLine($"Dialog Canceled: {result.Value}");
        }
        else
        {
            Console.WriteLine($"Dialog Saved: {result.Value}");
        }
    }

    private IEnumerable<DialogSize?> AllSizes
        => Enum.GetValues(typeof(DialogSize)).Cast<DialogSize?>().Prepend(null);

    private IEnumerable<DialogAlignment?> AllAlignments
        => Enum.GetValues(typeof(DialogAlignment)).Cast<DialogAlignment?>().Prepend(null);
}

```

--------------------------------

### Install Fluent UI Blazor NuGet packages

Source: https://fluentui-blazor-v5.azurewebsites.net/installation

Install the Fluent UI Blazor NuGet packages. The first command adds the main components package with the --prerelease flag; the second adds the Icons package. The source notes that with the pre-release version, you should not have the configuration <TreatWarningsAsErrors>true</TreatWarningsAsErrors> in your csproj file.

```bash
dotnet add package Microsoft.FluentUI.AspNetCore.Components --prerelease

```

```bash
dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons

```

--------------------------------

### Add icon with IconStart

Source: https://fluentui-blazor-v5.azurewebsites.net/Buttons/SplitButton

Adds a globe icon at the start of the split button using the IconStart parameter. The commented-out block shows an IconToggle example that is currently disabled due to a web component issue.

```razor
<FluentSplitButton IconStart="@(new Icons.Regular.Size20.Globe())"
                   Title="Open menu"
                   Label="Globe at start">
    <FluentMenuList>
        <FluentMenuItem>Menu item 1</FluentMenuItem>
        <FluentMenuItem>Menu item 2</FluentMenuItem>
        <FluentMenuItem>Menu item 3</FluentMenuItem>
        <FluentMenuItem>Menu item 4</FluentMenuItem>
    </FluentMenuList>
</FluentSplitButton>

@* To be re-added when the web componnet gets fixed
<FluentSplitButton IconToggle="@(new Icons.Regular.Size20.Globe())"
                   Title="Open menu"
                   Label="Replace chevron">
    ...
</FluentSplitButton>
*@

```

--------------------------------

### Add icons to FluentBadge with IconStart and IconEnd

Source: https://fluentui-blazor-v5.azurewebsites.net/Badges/Badge

Shows how to place an icon in the start or end slot of a FluentBadge. The icon color is coupled to the text color. The second example uses the Informative color and an IconLabel for accessibility.

```razor
<FluentBadge IconStart="@(new Icons.Regular.Size16.Globe())" Content="Badge" />

<FluentBadge Color="BadgeColor.Informative" IconEnd="@(new Icons.Regular.Size16.Globe())" IconLabel="A globe"  Content="Badge" />

```

--------------------------------

### Expected folder structure for fluentui-blazor-usage skill

Source: https://fluentui-blazor-v5.azurewebsites.net/Mcp/AISkills

Shows the required folder structure for installing the skill files. Place the skill files under `.github/skills/fluentui-blazor-usage/` with the `references` subfolder containing the three reference markdown files.

```text
your-project/
├── .github/
│   └── skills/
│       └── fluentui-blazor-usage/
│           ├── SKILL.md
│           └── references/
│               ├── SETUP.md
│               ├── DATAGRID.md
│               └── THEMING.md
├── src/
│   └── ...

```

--------------------------------

### Tooltip parameter on supported components

Source: https://fluentui-blazor-v5.azurewebsites.net/Tooltip

Use the Tooltip parameter on components that support it to simplify tooltip setup. This example shows FluentButton, FluentTextInput, and FluentIcon with tooltips. The tooltip content can include HTML markup such as <b>.

```razor
<FluentStack VerticalAlignment="VerticalAlignment.Center" HorizontalGap="12px">
    <FluentButton Tooltip="This is the description of the <b>button</b>" Label="Hover me" />
    <FluentTextInput Tooltip="This is the description of the <b>text input</b>" Placeholder="Hover me" />
    <FluentIcon Value="@(new Icons.Regular.Size20.CursorHover())" Tooltip="This is the description of the <b>cursor</b>" />
</FluentStack>

```

--------------------------------

### FluentTabs migration example (V4 to V5)

Source: https://fluentui-blazor-v5.azurewebsites.net/Migration/Tabs

Shows the migration from FluentTabs v4 to v5. In v4, use TabSize.Small, OnTabSelect, ShowClose, OnTabClose, Label, Icon, and wrap content in <Content>. In v5, use TabsSize.Small, ActiveTabChanged, Header, IconStart, and place content directly inside FluentTab.

```markup
<!-- V4 -->
<FluentTabs Size="TabSize.Small" @bind-ActiveTabId="activeId"
            OnTabSelect="@HandleSelect" ShowClose="true" OnTabClose="@HandleClose">
    <FluentTab Label="Tab 1" Icon="@(new Icons.Regular.Size16.Home())">
        <Content>Tab 1 content</Content>
    </FluentTab>
    <FluentTab Label="Tab 2">
        <Content>Tab 2 content</Content>
    </FluentTab>
</FluentTabs>
```

```markup
<!-- V5 -->
<FluentTabs Size="TabsSize.Small" @bind-ActiveTabId="activeId"
            ActiveTabChanged="@HandleSelect">
    <FluentTab Header="Tab 1" IconStart="@(new Icons.Regular.Size16.Home())">
        Tab 1 content
    </FluentTab>
    <FluentTab Header="Tab 2">
        Tab 2 content
    </FluentTab>
</FluentTabs>
```

--------------------------------

### Customize FluentMenuItem slots with FluentSlot

Source: https://fluentui-blazor-v5.azurewebsites.net/Menu

Use the slots directly when the icon parameters (IconIndicator, IconStart, IconEnd, IconSubmenu) are insufficient. The example shows a checkbox menu item with custom indicator, start, end, and submenu glyph content, plus a nested submenu item.

```razor
<FluentMenuList>
    <FluentMenuItem Role="MenuItemRole.Checkbox">
        <ChildContent>
            Item 1
            <span slot="@FluentSlot.Indicator">☑️</span>
            <span slot="@FluentSlot.Start">💙</span>
            <span slot="@FluentSlot.End">Ctrl+S</span>
            <span slot="@FluentSlot.SubMenuGlyph">→</span>
        </ChildContent>
        <MenuItems>
            <FluentMenuItem>Submenu 1</FluentMenuItem>
        </MenuItems>
    </FluentMenuItem>
</FluentMenuList>
```

--------------------------------

### Install Fluent UI Blazor templates

Source: https://fluentui-blazor-v5.azurewebsites.net/Templates

Installs the Microsoft.FluentUI.AspNetCore.Templates package, which provides four Blazor templates: Fluent Blazor Web App, Fluent Blazor WebAssembly Standalone App, .NET MAUI Fluent Blazor Hybrid and Web App, and Aspire Starter app.

```bash
dotnet new install Microsoft.FluentUI.AspNetCore.Templates

```

--------------------------------

### Typical conversation with AI assistant

Source: https://fluentui-blazor-v5.azurewebsites.net/Mcp/VersionCompatibility

An example conversation showing how the AI assistant uses GetVersionInfo and CheckProjectVersion to detect a version mismatch and recommend an upgrade command.

```text
User: "I want to use FluentDataGrid in my project."

AI: [Calls GetVersionInfo → reads .csproj → Calls CheckProjectVersion("4.9.0")]

AI: "Your project references version 4.9.0 of the component library,
     but this MCP server provides documentation for version 5.0.0-rc.1-26049.2.
     Parameters and APIs may differ.
     I recommend upgrading:
     dotnet add package Microsoft.FluentUI.AspNetCore.Components --version 5.0.0-rc.1-26049.2"

```

--------------------------------

### FluentIcon usage example with buttons

Source: https://fluentui-blazor-v5.azurewebsites.net/Icon

Shows how to render icons with FluentIcon, including using Icon.FromImageUrl for custom images, ToMarkup for direct markup, and integrating icons with FluentButton using IconStart and IconEnd parameters.

```razor
<div style="display: flex; gap: 10px;">
    <FluentIcon Value="@(new Icons.Regular.Size24.Save())" Title="Save" />
    <FluentIcon Value="@(new Icons.Regular.Size24.Open())" Title="Open" Color="Color.Error" />
    <FluentIcon Value="@(new Icons.Regular.Size24.Album())" />

    <FluentIcon Value="@(Icon.FromImageUrl("https://www.bing.com/sa/simg/bhp_scope_cplt16.png"))" Width="24px" />

    @(new Icons.Regular.Size20.Add().ToMarkup())
    @(new Icons.Regular.Size20.Airplane().ToMarkup("16px", "blue"))
</div>
<hr />
<div style="display: flex;">
    <FluentButton IconStart="@(new Icons.Regular.Size24.ArrowCircleLeft())">
        Back
    </FluentButton>

    <FluentButton IconEnd="@(new Icons.Regular.Size24.ArrowCircleRight().WithColor(Color.Success))">
        Next
    </FluentButton>

    <FluentButton IconEnd="@(new Icons.Regular.Size24.DismissCircle().WithColor("red"))">
        Exit
    </FluentButton>

    <FluentButton Appearance="ButtonAppearance.Primary"
                  IconEnd="@(new Icons.Regular.Size24.Alert())">
        Alert
    </FluentButton>
</div>
```
Tokens:
Raw