Announcing Fluent UI Blazor v5 RC2 — Toast, Autocomplete, Themes, and More

We are excited to announce the second Release Candidate of Fluent UI Blazor library v5! Since RC1, the team worked hard into the dev-v5 branch, delivering two new components — FluentAutocomplete and FluentToast — along with a powerful Theme API with a built-in Theme Designer, major DataGrid enhancements including pinned columns, and dozens of improvements across the board.

Visit our Demo web site.

New Component: FluentAutocomplete

The FluentAutocomplete component brings a fully-featured autocomplete experience to v5, replacing the v4 implementation with a modern, rebuilt component.

Key capabilities

  • Search-as-you-type — Filter options dynamically as the user types, with built-in debounce support.
  • Multi-select — Select multiple items displayed as dismissible badges inside the input area.
  • Keyboard navigation — Full arrow-key navigation, Enter to select, Escape to close, and Backspace to remove the last selected item.
  • Custom option templates — Use OptionTemplate to render rich, custom content for each suggestion.
  • Progress indicator — Show a loading indicator while fetching results asynchronously.
  • MaxAutoHeight / MaxSelectedWidth — Control the layout and overflow behavior of selected items.

Basic usage

<FluentAutocomplete OnOptionsSearch="@OnSearchAsync"
                    OptionText="@(item => item.Name)"
                    OptionDisabled="@(e => e.Code == "au")"
                    @bind-SelectedItems="@SelectedCountries" />

@code
{
    IEnumerable<Country> SelectedCountries { get; set; } = [];

    Task OnSearchAsync(OptionsSearchEventArgs<Country> e)
    {
        e.Items = Countries.Where(i => i.Name.StartsWith(e.Text, StringComparison.OrdinalIgnoreCase))
                           .OrderBy(i => i.Name);

        return Task.CompletedTask;
    }
}

This component is a complete rewrite — please consult the migration documentation for changes from v4’s FluentAutocomplete.

New Component: FluentToast & Toast Service

The new Toast service provides a feature-complete notification experience, including support for live-updating progress toasts.

Toast types

The library supports four toast scenarios through ToastType:

Type Description
Communication General notifications and messages
Confirmation Success / failure confirmations
IndeterminateProgress Long-running operations without progress tracking
DeterminateProgress Operations with measurable progress (e.g. upload)

Simple usage

@inject IToastService ToastService

// Fire-and-forget
await ToastService.ShowToastAsync(options =>
{
    options.Title = "File saved",
    options.Intent = ToastIntent.Success,
    Timeout = 3000,
});

Advanced: live toast instance

For scenarios like uploads or long-running operations, use ShowToastInstanceAsync to get a live reference:

var toast = await ToastService.ShowToastInstanceAsync(options =>
{
    options.Title = "Uploading document...";
    options.Type = ToastType.DeterminateProgress;
});

// Update progress while visible
await toast.UpdateAsync(t => t.Progress = 50);

// Complete and dismiss
await toast.UpdateAsync(t => t.Progress = 100);
await toast.CloseAsync();

Behavior highlights

  • Queueing — The FluentToastProvider manages maximum visible toasts, queue promotion, and positioning.
  • Pause on hover — Toast timeout pauses when the user hovers over it, or when the browser window loses focus.
  • Animated transitions — Smooth open/close animations.
  • Accessibility — ARIA attributes and politeness levels are applied based on toast intent.

Theme API & Theme Designer

Version RC2 introduces a comprehensive Theme API that gives you full control over your application’s visual identity — from a simple brand color to a fully custom design token set, with built-in persistence and a live Theme Designer.

Set the brand color declaratively

Add data-theme and data-theme-color attributes to your <body> tag:

<body data-theme="light" data-theme-color="#0078D4">

The library automatically detects these attributes, generates a color ramp, and applies it to the application.

Set the brand color with code

A full API is available through IThemeService:

@inject IThemeService ThemeService

// Set a custom brand color
await ThemeService.SetThemeAsync("#6B2AEE");

// Switch to dark mode
await ThemeService.SetDarkThemeAsync();

// Toggle light ↔ dark
await ThemeService.SwitchThemeAsync();

// Apply the Teams theme
await ThemeService.SetTeamsLightThemeAsync();

// Full control with settings
await ThemeService.SetThemeAsync(new ThemeSettings
{
    Color = "#6B2AEE",
    Mode = ThemeMode.Dark,
    HueTorsion = 0.1f,
    Vibrancy = 0.2f,
});

Theme Designer

The demo site includes a Theme Designer page where you can interactively pick a brand color, adjust hue torsion and vibrancy, preview the generated color ramp, and see your theme applied to actual components in real time. When you’re happy with the result, apply it or export the settings.

Key features

Feature Description
Brand color ramp Automatic generation of a full color ramp from a single hex color
Light / Dark / System Support for all three modes, with automatic system preference detection
Teams themes Built-in Teams Light and Teams Dark themes
localStorage Theme settings are cached and restored across sessions automatically
Per-element theming Apply a custom theme to a specific ElementReference without changing global
RTL support SwitchDirectionAsync() to toggle between LTR and RTL

DataGrid Enhancements

The FluentDataGrid has received multiple important improvements in RC2.

Pinned (frozen) columns

Columns can now be pinned to the left or right edge of the grid, so they remain visible during horizontal scrolling:

<FluentDataGrid Items="@people" Style="overflow-x: auto; max-width: 800px;">
    <PropertyColumn Property="@(p => p.Id)" Width="80px" Pin="DataGridColumnPin.Left" />
    <PropertyColumn Property="@(p => p.Name)" Width="200px" Pin="DataGridColumnPin.Left" />
    <PropertyColumn Property="@(p => p.Email)" Width="300px" />
    <PropertyColumn Property="@(p => p.City)" Width="200px" />
    <PropertyColumn Property="@(p => p.Country)" Width="200px" />
    <PropertyColumn Property="@(p => p.Actions)" Width="100px" Pin="DataGridColumnPin.Right" />
</FluentDataGrid>

Pinned columns require an explicit pixel width and must be contiguous (all left-pinned columns must come first, all right-pinned columns must come last). The grid validates these rules and throws a descriptive exception for invalid configurations.

HierarchicalSelectColumn

A new column type that provides parent-child selection behavior, allowing users to select groups of related rows through a hierarchical checkbox.

Other DataGrid improvements

Feature / Fix PR
StripedRows parameter for alternating row styling #4594
DisableCellFocus parameter #4653
OnSortChanged event callback #4572
Skip debounce delay on first provider call with virtualize #4679
Fix SelectedItems getting unselected when using pagination/virtualization #4624
Width issues fixed #4588

Calendar & DatePicker

  • MinDate and MaxDate parameters: you can now constrain the selectable date range:
<FluentCalendar @bind-Value="@selectedDate"
                MinDate="@DateTime.Today"
                MaxDate="@DateTime.Today.AddMonths(3)" />
  • Year view: current year centered — The year picker now places the current year in the middle row for better usability.
  • Fix: month/year navigation getting stuck — Resolved an issue where clicking month or year could leave the calendar in a stuck state.
  • DatePicker: Width forwarded — The Width parameter is now properly forwarded to the underlying FluentTextInput.

Component Improvements

Component / Area Change PR
FluentLink Support clickable links with OnClick events and improved hover styles #4649
Badge Added .fluent-badge CSS classes for custom styling #4597
AppBar Allow hiding active bar, render active bar when horizontal #4581
AppBar Calculate height of active bar dynamically #4580
Nav Enhanced accessibility (a11y) support #4553
Nav Refactoring and issue fixes #4550
DragContainer/DropZone Switch from Action to EventCallback for event handlers #4590
Checkbox Fix “checked” logic to respect ThreeState parameter #4634
Accordion Fix change event to only trigger for fluent-accordion elements #4600
List Refactor OptionSelectedComparer to use IEqualityComparer #4666
Placeholder Fix placeholder rendering error #4618
Custom events Rename custom events to avoid .NET 11 exception #4607

Localization

Building on the localization system introduced in RC1:

  • Paginator localizable strings (#4672) — All Paginator strings (page labels, navigation buttons) are now localizable through IFluentLocalizer.
  • Translation key-value pairs reference (#4660) — The documentation now includes a complete table of all default translation keys and their values, making it easier to implement IFluentLocalizer.

MCP Server & Tooling

  • Migration Service for v4 → v5 (#4546) — A new migration service and resources to help automate the transition from v4 to v5 through the MCP Server.
  • ModelContextProtocol updated to v1.1.0 (#4604) — The MCP Server now uses the latest MCP protocol version.
  • AI Skills docs and download UI (#4528) — Documentation for the AI Skills available through the library, with a download UI.
  • Version compatibility tools (#4527) — New tools and documentation to check version compatibility across FluentUI Blazor packages.

Try It Now

Resource Link
NuGet Microsoft.FluentUI.AspNetCore.Components --prerelease
Documentation https://v5.fluentui-blazor.net.net
GitHub https://github.com/microsoft/fluentui-blazor
Migration Guide Migration to v5

This is still a Release Candidate — the API surface is stabilized, but we continue to count on the community to help us identify remaining issues before the final release. Please file issues on GitHub, and don’t hesitate to contribute.

We are still working on the remaining items for the final release: dev-v5 - TODO List

Thank you to everyone who has contributed, tested, and provided feedback. A special shout-out to the community contributors who made significant contributions to this release!

Happy Blazoring!