Fluent UI Blazor v5 Is Now Available!
We are very pleased to announce the final release of Fluent UI Blazor v5!
After five Release Candidates, extensive community feedback, and a significant amount of foundational work, this new major version is now stable and available on NuGet. It provides a modernized foundation that is more consistent with the current Fluent UI ecosystem, offers better Blazor and browser performance, and is easier to evolve.
Version 5 is not merely an update to v4: it renews the library’s foundations. It adopts the new Fluent UI Web Components, brings the component APIs closer to those of Fluent UI React, optimizes Blazor rendering and browser performance, and thoroughly reorganizes the styles.
Discover the final release and all its examples on the Fluent UI Blazor v5 demo website.
Version 5 Is Available on NuGet
Developers can choose between configuring their application manually or starting with a ready-to-use Blazor project template.
The complete manual procedure is available on the Fluent UI Blazor installation page. The main steps are:
- Install the NuGet Package — add the Fluent UI Blazor v5 package to your application.
- Add Imports — make the component namespaces available to your Razor files.
- Register Fluent UI Services — register the library services when configuring your application.
- Add Required Components to Layout — place the providers required by Fluent UI components in your main layout.
- Verify Render Mode — ensure that the selected Blazor render mode supports the interactivity required by your components.
- Test the Installation — add a Fluent UI component to a page, then run the application and confirm that it renders and behaves correctly.
Example:
@page "/counter"
@inject IDialogService DialogService
@* Apply an "interactive" render mode, or set the render mode globally for all routes *@
@rendermode InteractiveServer
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<FluentStack Orientation="Orientation.Vertical">
<FluentButton Appearance="ButtonAppearance.Primary"
OnClick="@IncrementCountAsync">
Click me
</FluentButton>
<FluentLabel Margin="@Margin.Vertical4">
Current count: @currentCount
</FluentLabel>
</FluentStack>
@code {
private int currentCount = 0;
private async Task IncrementCountAsync()
{
currentCount++;
await DialogService.ShowInfoAsync("Counter Incremented");
}
}
Why Does v5 Contain Breaking Changes?
A new major version is the right time to evolve a library’s foundations. For Fluent UI Blazor v5, maintaining full compatibility with v4 would have prevented several essential improvements.
Version 5 is therefore a migration, not a simple package update. The API changes were made for four main reasons.
New Fluent UI Web Components
Version 4 relied on the previous generation of Fluent UI Web Components. Version 5 uses the new Fluent UI Web Components 3.x, built on a more modern foundation.
This change provides rendering that is closer to the current Fluent 2 design language, better accessibility, lighter JavaScript, and more consistent behavior across components.
APIs Aligned with Fluent UI React
Where relevant, property names, enum values, and behaviors have been brought closer to those of Fluent UI React.
This alignment makes it easier to move from one Fluent UI technology to another, makes Microsoft documentation easier to apply, and reduces conceptual differences between the React, Web Components, and Blazor implementations. However, it does require some existing parameters to be renamed or reorganized.
More Efficient Blazor Rendering
Many components have been redesigned to reduce allocations, unnecessary re-renders, and communication between .NET and JavaScript. This applies in particular to lists, menus, notification services, layouts, and the DataGrid.
Version 5 also provides better support for the different Blazor render modes.
Better Browser Performance
Several operations have been moved closer to the browser when running them on the client is more efficient. The new FluentOverflow, for example, calculates hidden items directly in its Web Component. Styles are loaded and reapplied more efficiently, including during Blazor enhanced navigation.
Reorganized and Improved Styles
The styles have been revised to better follow Fluent UI design tokens, improve light and dark themes, simplify customization, and ensure more consistent rendering.
Some internal CSS classes from v4 have been removed or changed. If your application directly overrides component internals, carefully review these customizations during migration.
The v4-to-v5 migration guide documents the general changes, renamed components, modified properties, and removed components.
Components Available in Fluent UI Blazor v5
Version 5 offers a comprehensive catalog covering input, navigation, data display, notifications, layouts, and visualization. Each link below opens the corresponding documentation and interactive examples.
Actions and Commands
| Component | What is it used for? |
|---|---|
FluentButton |
Triggers an action with Fluent UI appearances, sizes, shapes, icons, and loading states. |
FluentAnchorButton |
Presents a navigation link with the appearance of a button and Blazor navigation integration. |
FluentCompoundButton |
Displays a button with secondary text to better explain its action. |
FluentMenuButton |
Combines a button with a command menu. |
FluentSplitButton |
Separates a primary action from a menu offering alternative actions. |
FluentToggleButton |
Represents a two-state command that can be on or off. |
FluentAppBar |
Organizes a responsive action bar whose commands can move into an overflow menu. |
FluentMenu |
Builds accessible menus that can be controlled by keyboard or code. |
FluentOverflow |
Detects items that no longer fit in the available space and moves them into a menu. |
Fields, Forms, and Selection
| Component | What is it used for? |
|---|---|
FluentTextInput |
Enters a single-line text value with validation, a label, prefixes, and suffixes. |
FluentTextArea |
Enters multiline text, with resizing and integration with Blazor forms. |
FluentNumberInput |
Enters a numeric value with limits, steps, and formatting. |
FluentCheckbox |
Selects a Boolean value, with optional support for a third state. |
FluentSwitch |
Immediately enables or disables a feature or setting. |
FluentRadio |
Selects a single value from several options. |
FluentSlider |
Selects a value from a continuous or discrete range. |
FluentSelect |
Provides single selection from a drop-down list. |
FluentCombobox |
Combines free-form input with the selection of an option from a list. |
FluentListbox |
Displays a list of selectable options, with single or multiple selection. |
FluentAutocomplete |
Searches for and selects one or more values with asynchronous filtering and custom templates. |
FluentCalendar |
Displays an interactive calendar for selecting a date. |
FluentDatePicker |
Enters a date in a field associated with a calendar. |
FluentTimePicker |
Enters a time from a list adapted to the current culture. |
FluentColorPicker |
Selects a color from a palette, wheel, or HSV square, either directly or in a compact field. |
FluentInputFile |
Uploads one or more files with progress, validation, and preview support. |
FluentField |
Structures a form field with a label, help text, validation, and associated content. |
FluentLabel |
Displays the accessible label of a form control. |
FluentLabelInfo |
Adds contextual help to a label in an information popover. |
FluentValidationMessage |
Displays Blazor validation errors with Fluent UI styling. |
Navigation and Content Organization
| Component | What is it used for? |
|---|---|
FluentAccordion |
Organizes content into expandable and collapsible sections. |
FluentTabs |
Distributes multiple views across tabbed navigation. |
FluentNav |
Builds an application’s hierarchical navigation with categories, icons, and active states. |
FluentTreeView |
Displays and manipulates hierarchical data as a tree. |
FluentWizard |
Guides the user through a sequence of steps with navigation and validation. |
FluentLink |
Displays a Fluent UI link that uses Blazor navigation for internal URLs. |
FluentKeyCode |
Detects keys or keyboard shortcuts within a given area. |
FluentPullToRefresh |
Refreshes content with a swipe gesture, particularly on touch devices. |
Layout
| Component | What is it used for? |
|---|---|
FluentLayout |
Defines an application’s complete responsive layout with a header, navigation, content, and footer. |
FluentGrid |
Organizes content in a responsive twelve-column grid. |
FluentStack |
Aligns items horizontally or vertically with controlled spacing and distribution. |
FluentSpacer |
Adds flexible space between items in a layout. |
FluentMultiSplitter |
Creates multiple resizable panels using drag and drop. |
FluentDivider |
Visually separates groups of content. |
FluentCard |
Groups information and actions on a Fluent UI surface. |
Data, Lists, and Interactions
| Component | What is it used for? |
|---|---|
FluentDataGrid |
Displays tabular data with sorting, pagination, virtualization, pinned or reorderable columns, hierarchies, and master/detail rows. |
FluentPaginator |
Controls pagination for a collection or DataGrid. |
FluentSortableList |
Reorders a list using drag and drop. |
FluentDragContainer |
Creates drag-and-drop scenarios across multiple areas. |
FluentRatingDisplay |
Displays a read-only star rating. |
| Styled HTML table | Applies Fluent UI styles to a lightweight native HTML table. |
Dialogs, Messages, and User Feedback
| Component | What is it used for? |
|---|---|
FluentDialog |
Displays modal dialogs, either declaratively or opened through IDialogService. |
FluentDrawer |
Presents a side panel for displaying details, a form, or secondary actions. |
FluentMessageBox |
Quickly opens a standard confirmation or information box. |
FluentMessageBar |
Displays persistent success, warning, information, or error messages. |
FluentToast |
Displays temporary notifications, including operations with progress. |
FluentTooltip |
Presents brief information on hover or focus. |
FluentPopover |
Positions contextual content near a target element. |
FluentOverlay |
Covers an area or the application during a blocking operation. |
FluentProgressBar |
Represents the determinate or indeterminate progress of an operation. |
FluentSpinner |
Visually indicates that loading or processing is in progress. |
FluentSkeleton |
Displays a temporary structure while content is loading. |
FluentErrorBoundary |
Catches Blazor rendering errors and displays a consistent recovery interface. |
Text, Media, and Presentation
| Component | What is it used for? |
|---|---|
FluentText |
Applies Fluent UI typography to text: size, weight, alignment, and truncation. |
FluentIcon |
Displays a Fluent UI System Icon or a custom icon. |
FluentEmoji |
Displays an emoji from the Microsoft Fluent Emoji collection. |
FluentImage |
Displays an image with size, fit, and shape options. |
FluentAvatar |
Represents a person or entity with an image, initials, an icon, or a presence badge. |
FluentBadge |
Highlights a category, status, or short piece of information. |
FluentCounterBadge |
Displays a counter, such as the number of unread notifications. |
FluentPresenceBadge |
Indicates a person’s availability or status. |
FluentHighlighter |
Highlights search matches within text. |
Charts
Charts are distributed in the optional Microsoft.FluentUI.AspNetCore.Components.Charts package.
| Component | What is it used for? |
|---|---|
FluentAreaChart |
Represents the evolution of one or more series using curves and filled areas. |
FluentDonutChart |
Compares the proportions of several categories in a donut chart. |
FluentFunnelChart |
Visualizes the successive stages of a process and their conversion rates. |
FluentGanttChart |
Positions tasks or events on a timeline. |
FluentHorizontalBarChart |
Compares values using simple or stacked horizontal bars. |
FluentHorizontalBarChartWithAxis |
Displays horizontal bars with configurable axes, tick marks, and labels. |
Shared Infrastructure
The FluentProviders component groups the providers required for dialogs, toasts, tooltips, messages, and overlays. Version 5 also provides a theming API for applying a brand color, switching between light and dark modes, using Teams themes, and customizing design tokens.
Migrating from Fluent UI Blazor v4
Start by replacing the v4 package references with version 5.0.0, then build your application to identify the API changes. The migration guide then details the required adaptations component by component:
- renamed or removed components;
- renamed parameters and events;
- new enum values;
- changes to markup structure;
- CSS selectors that need to be updated;
- new services and providers.
Consult the complete v4-to-v5 migration guide before updating an existing application.
The Fluent UI Blazor MCP server can also help compatible development assistants search for components, their parameters, their events, and migration information.
Version 4 Maintenance
Version 4 remains available and will continue to be maintained for a few weeks, giving existing applications time to plan their migration.
However, this maintenance will be limited to essential security fixes. Version 4 will no longer receive new features, new components, or functional improvements. All new development will take place exclusively on the v5 branch.
We therefore recommend planning the migration of active applications to Fluent UI Blazor v5 now.
Resources
| Resource | Link |
|---|---|
| NuGet | Microsoft.FluentUI.AspNetCore.Components |
| Documentation and demo | https://v5.fluentui-blazor.net |
| Migration guide | Migrating from v4 to v5 |
| GitHub | https://github.com/microsoft/fluentui-blazor |
| MCP server | MCP server documentation |
This final release is the culmination of many months of design, development, testing, and discussion. Thank you to everyone who tried the Release Candidates, reported issues, suggested improvements, contributed code, and enhanced the documentation.
We cannot wait to see the applications you build with Fluent UI Blazor v5!