FluentUI.Blazor v5 RC4

Announcing Fluent UI Blazor v5 RC4 — Charts, Notifications, Templates, FluentLabelInfo, and More

We are excited to announce the fourth Release Candidate of Fluent UI Blazor library v5! Since RC3, the team kept pushing on the dev-v5 branch with a brand new Charts package, two dedicated DataGrid adapters for OData and Entity Framework, a new FluentLabelInfo component, a new FluentValidationMessage component, a complete overhaul of the Toast / Notification services, a fresh set of project templates (Blazor Web App, MAUI Hybrid, …), and a long list of refinements across FluentAutocomplete, FluentPopover, FluentTimePicker, FluentDatePicker, FluentMenu, FluentGrid, FluentPaginator, FluentField, FluentSelect, FluentToast and more.

Visit our Demo web site.

New Package: Microsoft.FluentUI.AspNetCore.Components.Charts

Charts are here! RC4 introduces a brand-new Charts package, shipped as a separate NuGet so that you only pull it in when you need it. The initial set of charts available in v5 covers the most common scenarios:

• Donut chart
• Funnel chart
• Horizontal bar chart
• Horizontal stacked bar chart

The components share a consistent API based on a strongly-typed data source and Fluent UI theme tokens, so charts automatically follow your application’s color palette, dark/light theme, and density.

@using Microsoft.FluentUI.AspNetCore.Components.Charts

<FluentDonutChart ChartData="@Data"
                  ChartTitle="Sales by region"
                  Width="320" Height="320" />

@code
{
    DonutDataPoint[] Data { get; set; } =
    [
        new DonutDataPoint { Legend = "Europe", Data = 42 },
        new DonutDataPoint { Legend = "North America", Data = 28 },
        new DonutDataPoint { Legend = "Asia", Data = 22 },
        new DonutDataPoint { Legend = "Other", Data = 8 },
    ];
}

Install with:

dotnet add package Microsoft.FluentUI.AspNetCore.Components.Charts --prerelease

New Packages: DataGrid OData & Entity Framework Adapters

To keep the core library lightweight, the FluentDataGrid adapters for OData and Entity Framework are now shipped as two dedicated NuGet packages:

• Microsoft.FluentUI.AspNetCore.Components.DataGrid.ODataAdapter
• Microsoft.FluentUI.AspNetCore.Components.DataGrid.EntityFrameworkAdapter

This makes the core package smaller for applications that don’t need them, while still giving you a first-class integration with IQueryable for OData services or EF Core DbContext.

New Component: FluentLabelInfo

FluentLabelInfo displays a label followed by a small info icon. Clicking the icon opens a popover that explains the field — perfect for inline help next to inputs without polluting the form with descriptive paragraphs.

<FluentLabelInfo InfoText="This is example information for an InfoLabel."
                 InfoActionLink="https://dotnet.microsoft.com/">
    Example label
</FluentLabelInfo>

<FluentTextInput Label="Example label"
                 LabelInfo="@(LabelInfo.WithText("This is example information for an InfoLabel.")
                                       .WithActionLink("https://dotnet.microsoft.com"))" />

Highlights:

• Customizable icon, title and content — the popover can host arbitrary markup through ChildContent.
• Localizable default texts - the built-in “More info” / “Close” texts can be overridden via the standard localization mechanism.
• MaxWidth parameter — caps the popover width to keep long descriptions readable.

New Component: FluentValidationMessage

FluentValidationMessage is the Fluent UI counterpart of Blazor’s built-in ValidationMessage<T>. It hooks into the EditContext and renders validation errors with the same styling and density as the rest of the Fluent UI form components, so error messages no longer look out of place inside a FluentField.

<EditForm Model="@Model">
    <DataAnnotationsValidator />
    <FluentValidationSummary />

    <FluentTextInput Name="identifier" 
                     @bind-Value="Identifier" 
                     Label="Identifier"
                     Required="true" />
</EditForm>

New NotificationService (formerly MessageBarService)

RC4 introduces a unified INotificationService to display in-app notifications (message bars) from anywhere in your application — from a service, a handler, or a component — without having to wire up a FluentMessageBarProvider manually.

The service was initially shipped as IMessageBarService and renamed to INotificationService for a more idiomatic name and to leave room for future channels (toasts, dialogs, …).

For the message bars created by the service to be rendered, you must add at least one FluentMessageBarProvider component in your application (typically in MainLayout.razor, or in any page where you want the messages to appear).

<FluentMessageBarProvider Section="MAIN" />

@inject INotificationService Notifications

// Show the Success MessageBar
await NotificationService.ShowSuccessBarAsync("MAIN", "This is a success message bar")

Toast Service Refactoring

The Toast service has been refactored on top of the same notification model used by INotificationService, and gains support for non-blocking notifications.

@inject INotificationService Notifications

// Show the Success Toast
await NotificationService.ShowSuccessToastAsync("Saved");

// Show the Progress Toast
var ProgressResult = await NotificationService.ShowProgressToastAsync("Working...");

// Use the kept reference later to interact with the toast
await ProgressResult.Instance.CloseAsync();

New Project Templates

A complete set of Fluent UI Blazor project templates is now available, so you can scaffold a ready-to-go application in a single command:

dotnet new install Microsoft.FluentUI.AspNetCore.Templates
dotnet new fluentblazor     -n MyApp       # Blazor Web App
dotnet new fluentblazorwasm -n MyApp.Wasm  # Blazor WebAssembly Standalone
dotnet new fluentblazormaui -n MyApp.Maui  # .NET MAUI Hybrid

The templates ship with the Fluent UI providers (FluentLayout, theming, toast, dialog, notification, overlay) already wired up, plus a starter page that you can use as a reference.

Other Improvements

FluentAutocomplete received a focused round of fixes and ergonomics improvements:

FluentPopover & FluentMenu

• FluentPopover — react to viewport changes (#4884) — popovers reposition themselves correctly when the viewport is resized, scrolled, or rotated.
• FluentPopover is now position: fixed (#4918) — fixes clipping issues when the popover is rendered inside a scrolling container.
• FluentMenu — fix type handling and initialization logic (#4921) — resolves edge cases when the menu was opened before its trigger had finished initializing.

Inputs, Lists & DataGrid

• FluentSelect (combobox) — fix default text retrieval (#4894) — the displayed text now correctly reflects the bound value on first render.
• FluentTextArea — fix initial value setting during render (#4917).
• FluentOption — customizable CSS class (#4911) — apply per-option styling in FluentSelect / FluentCombobox / FluentListbox.
• FluentPaginator — do not use primary color for default icons (#4930) — improves contrast on tinted backgrounds.

FluentTimePicker & FluentDatePicker

• FluentTimePicker — fix item generation logic and add unit tests (#4890) — the list of available times now correctly honors the Min, Max and Step parameters.
• FluentDatePicker — add MinDate and MaxDate parameters (#4955) — restrict the calendar to a given date range, with matching localization.

<FluentDatePicker @bind-Value="@MyDate"
                  MinDate="DateTime.Today"
                  MaxDate="DateTime.Today.AddMonths(6)" />

Layout: FluentGrid & FluentField

• FluentGrid — refactor spacing to use CSS gap (#4922) — simpler, more predictable spacing between items, and full support for the Spacing parameter without negative margins.
• FluentField — improved Width handling (#4942) — the field width is now propagated to its inner input automatically.

Web Components & Rendering

• Updated @fluentui/web-components and related dependencies (#4916).
• Component registration now checks for customElements support (#4932, follow-up #4935) — prevents JS errors in environments where custom elements are not available.
• Styles registered as adopted stylesheets (#4971) — Fluent UI styles survive enhanced navigation in Blazor SSR scenarios and are re-applied automatically when the page is morphed by Blazor.

Try It Now

This fourth Release Candidate brings us very close to the final v5 release. The API surface is now considered stable, and we’re focusing on polish, fixes, and the remaining items tracked in dev-v5 - TODO List.

As always, please file issues on GitHub and don’t hesitate to contribute. A huge thank you to everyone who tested RC3, reported issues, and submitted pull requests — special thanks to community contributors like @MarvinKlein1508, @aclerbois and @vnbaaij for their continued involvement.

Happy Blazoring!