We just shipped the second release candidate for v5, and boy did we manage to squeeze in a slew of new stuff...

Since RC1, we’ve worked hard on delivering two new components — AutoComplete and Toast — along with a powerful Theme API (including a Theme Designer), major DataGrid enhancements such as pinned columns, and dozens of improvements across the board.

AutoComplete

The FluentAutocomplete component brings a completely rebuilt, fully-featured AutoComplete experience to v5, replacing the v4 implementation with a more modern and better designed 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.

Toast & ToastService

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

The library supports four toast scenarios through ToastType:

  • 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: Use a live toast instance

For scenarios like uploads or long-running operations, use ShowToastInstanceAsync to get a live instance reference. You can then update the content of the Toast while it is being shown:

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();

Other 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 & Designer

We're introducing a comprehensive Theme API that gives you full control (within the bounds of the Fluent Design System) over your application’s visual identity — from a simple brand color to a fully customized 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 yourtag:

<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 the IThemeService. A simple example on how to use this:

@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, you can apply the settings to the demo site with a click on a button.

Key features

  • Brand color ramp — Automatic generation of a full color ramp from a single hex color (with the option to use the exact specified 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 settings
  • RTL support — SwitchDirectionAsync() to toggle between LTR and RTL

DataGrid Enhancements

The FluentDataGrid has been significantly enhanced in RC2

Pinned (frozen/sticky) 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 width and must be contiguous (all start-pinned columns must come first, all end-pinned columns must come last). The DataGrid validates these rules and throws a descriptive exception when detecting an invalid configuration.

HierarchicalSelectColumn

Besides the hierarchical DataGrid option added in RC!, a new column type has now been added that provides parent-child selection behavior, allowing users to select groups of related rows through a hierarchical checkbox.

And more

  • StripedRows parameter for alternating row styling
  • DisableCellFocus parameter
  • OnSortChanged event callback
  • Skip debounce delay on first provider call when using Virtualize
  • Fix SelectedItems getting unselected when using pagination/virtualization
  • Some Width issues fixed

Calendar & DatePicker

We've added MinDate and MaxDate parameters so it is now possible to constrain the selectable date range:

<FluentCalendar @bind-Value="@selectedDate"
                MinDate="@DateTime.Today"
                MaxDate="@DateTime.Today.AddMonths(3)" />

Other changes include:

  • 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.
  • Width forwarded — The Width parameter is now properly forwarded to the underlying FluentTextInput.

Other component improvements

Some other noteworthy improvements and fixes:

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

Localization

Building on the localization system we introduced in RC1:

  • Paginator localizable strings — All Paginator strings (page labels, navigation buttons) are now localizable through IFluentLocalizer.
  • Translation key-value pairs reference — 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 — A new migration service and resources to help automate the transition from v4 to v5 with the MCP Server.
  • ModelContextProtocol updated to v1.1.0 — The MCP Server now uses the latest MCP protocol version.
  • AI Skills docs and download UI — Documentation for the AI Skills available through the library, with a download UI.
  • Version compatibility tools — New tools and documentation to check version compatibility across the Fluent UI Blazor packages family.

Help us and try it now

We are still in the Release Candidate phase. The APIs are mostly stabilized, but we would still very much like the community to help us identify any remaining issues before the final release. Please file issues on GitHub, and don’t hesitate to contribute.

To see what we still want to complete before the v5 final release, see our dev-v5 - TODO List

Thank you to everyone who has already contributed, tested, and provided feedback. We hope you will continue doing so.

A special shout-out goes to the community contributors who made significant contributions to this release!

Comments

Be the first to post a comment

Post a comment