FluentUI.Blazor v5.rc2
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
OptionTemplateto 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
FluentToastProvidermanages 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
MinDateandMaxDateparameters: 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
Widthparameter is now properly forwarded to the underlyingFluentTextInput.
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://fluentui-blazor-v5.azurewebsites.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!