V5: What is the status?

[Vincent Baaij (vnbaaij)]

The table below gives an overview of the current status of the components for the V5 library. Empty cell in V5 column means work on that component has not started yet.

V5 components that are marked done can be seen in action here: https://v5.fluentui-blazor.net

We will try to keep this table updated.

ToDo:

• AutoComplete
• EditForm
• ProfileMenu
• PullToRefresh PR in review
• SplashScreen
• SortableList
• Toast
• ValidationMessage
• ValidationStatus
• Wizard

No Web Component available:

• Breadcrumb
• BreadcrumbItem
• Toolbar

No longer available in v5

• AccessibilityStatus
• Flipper
• HorizontalScroll

Legend:
✅: Done
⚠️: Attention
⛔️: Not available in older form (renamed/replaced/etc)
🆕: New component in v5, not available in v4

WC = Web Component
NBC = Native Blazor Component

7 Jan 2026: AppBar/AppBarItem
29 Dec 2025: Added Nav family, Overflow/OverflowItem, Paginator, DragContainer, DropZone
3 Jun 2025: Added Card, ErrorBoundary, Highlighter, InputFile, KeyCode and TreeView/TreeItem
15 Apr 2025: Added: Accordion/AccordionItem, Radio/RadioGroup, MultiSplitter and Image
5 Apr 2025: Added: Spacer,
1 Apr 2025: Initial status overview

Component	V4	V5	Notes
AccessibilityStatus	✅	⛔️	⚠️Deprecated. Not available in v5
Accordion	✅	✅
AccordionItem	✅	✅
Anchor	✅	⛔️	⚠️Renamed → See Link, AnchorButton
AnchorButton		🆕✅
AnchoredRegion	✅	⛔️	⚠️Deprecated. Not available in v5
AppBar	✅	✅
AppBarItem	✅	✅
AutoComplete	✅
Avatar		🆕✅
Badge	✅	✅
BodyContent	✅	⛔️	⚠️Deprecated. Not available in v5
Breadcrumb	✅	⚠️	No V3 Web Component available
BreadcrumbItem	✅	⚠️	No V3 Web Component available
Button	✅	✅
Calendar	✅	✅	No V3 Web Component available. Keep using NBC
Card	✅	✅	🚧 WC still in progress. We use own implementation for now
Checkbox	✅	✅
Color	✅	✅	Browser dependent implementation via TextInput
Combobox	✅	✅
CompoundButton		🆕✅
CounterBadge	✅	✅
DataGrid	✅	✅
DatePicker	✅	✅	Keep using NBC
DesignSystemProvider	✅	⛔️	Not available in v5
DesignTheme	✅	⛔️	Not available in v5
Dialog	✅	✅	⚠️ API Change → Split into two components to allow for more expressive modals.
DialogBody		🆕✅
Divider	✅	✅
DragContainer	✅	✅
Drawer		🆕✅
DrawerBody		🆕✅
Dropdown		✅
DropZone	✅	✅
EditForm	✅
Emoji	✅	✅
ErrorBoundary		🆕✅
Field		🆕✅
Flipper	✅	⛔️	⚠️Will not be available in v5.0
Footer	✅	✅	LayoutItem Area=Footer
Grid	✅	✅
GridItem	✅	✅
Header	✅	✅	LayoutItem Area=Header
Highlighter	✅	✅
HorizontalScroll	✅	⛔️	⚠️ Will not be available in v5.0
Icon	✅	✅
Image		🆕 ✅
InputFile	✅	✅
InputLabel	✅	✅	See Field component
KeyCode	✅	✅
KeyCodeProvider	✅	✅
Label	✅	✅	See Text component
Label		🆕✅
Layout	✅	✅
LayoutItem		🆕✅	Replace Header, Footer, etc
LayoutHamburger		🆕✅
Link		✅	(Renamed)
Listbox	✅	✅
ListboxOption	✅	✅
Main	✅	✅	Replaced by FluentLayout
MainLayout	✅	✅	Replaced by FluentLayout
Menu	✅	✅
MenuButton		🆕✅
MenuItem	✅	✅
MenuList		🆕✅
MessageBar	✅	✅
MultiSplitter	✅	✅
MultiSplitterPane	✅	✅
NavGroup	✅		Replaced with NavCategory
NavLink	✅		Replaced with NavItem
NavMenu	✅		Replaced with Nav
Nav		🆕✅	Implements Fluent 2 Nav
NavCategory		🆕 ✅	See 'Nav` above
NavDivider		🆕✅	See Nav above
NavItem		🆕✅	See Nav above
NavSectionHeader		🆕✅	See Nav above
NavMenuGroup	✅	⛔️	Deprecated, Won't be available in v5
NavMenuLink	✅	⛔️	Deprecated, Won't be available in v5
NavMenuTree	✅	⛔️	Deprecated, Won't be available in v5
NumberField	✅	✅	Browser dependent implementation via TextInput
Overflow	✅	✅
OverflowItem	✅	✅
Overlay	✅	✅
Paginator	✅	✅
Persona	✅	⛔️	Use Avatar
Popover	✅	✅
PresenceBadge	✅	✅
ProfileMenu	✅
Progress	✅	⛔️	🔀 Renamed → See progress-bar
ProgressBar		✅	(Renamed)
ProgressRing	✅	⛔️	🔀 Renamed → See spinner
PullToRefresh	✅
Radio	✅	✅
RadioGroup	✅	✅
Rating	✅	⛔️	Renamed to RatingDisplay
RatingDisplay		🆕✅
Search	✅	✅	Browser dependent implementation via TextInput
Select	✅	✅
Skeleton	✅	✅
Slider	✅	✅
SliderLabel	✅	⛔️	⚠️ Deprecated → See label, field
SortableList	✅
Spacer	✅	✅
Spinner		🆕✅
Splitter	✅		Replaced by MultiSplitter
SplashScreen	✅
Stack	✅	✅
Switch	✅	✅
Tab	✅	✅
Tabs	✅	✅
Text		🆕✅	Replaces Label
TextArea	✅	✅
TextField	✅	⛔️	🔀 Replaced by TextInput
TextInput		🆕✅
TimePicker	✅	✅
Toast	✅
Toolbar	✅		⚠️ No V3 Web Component available
Tooltip	✅	✅
TreeItem	✅	✅
TreeView	✅	✅
ValidationMessage	✅
ValidationSummary	✅
Wizard	✅

[xiaoxin (hi-xiaoxin)]

Hi Vincent Baaij (@vnbaaij) :
For some reason, our product is actively shifting from MudBlazor to FluentUI. I would like to know when the first beta version will be released?

[Vincent Baaij (vnbaaij)]

Preview packages are already available. See the https://github.com/microsoft/fluentui-blazor/blob/dev-v5/docs%2Fusing-latest-daily.md file

[Jérémy JANISZEWSKI (JeremyJ78)]

I see that you have Avatar (a replacement for Personae ? Or Personae will be an "extension" of the Avatar ?)
Do you plan to have Avatar Group ? :)

[Denis Voituron (dvoituron)]

Probably yes. There is a web component in development. And we will use it for the Blazor component.
microsoft/fluentui#26718

[Parsa (parsalotfy)]

Thanks for the efforts

[true-perfect-code]

What is the general situation with the Visible property for components where this is not yet available?

With buttons, for example, it would definitely be an advantage if you could make different buttons visible or invisible depending on the logic.

A specific example are the commands in a table row for editing, saving, cancelling and deleting a row. The first state is Edit and Delete. Once you have clicked on Edit, the Edit and Delete buttons should be hidden while Save and Cancel are displayed. Of course you solve this in Razor via if, but it would be much more elegant if you did it via Binding, because the code would then be much clearer.

One more question: This has probably been answered somewhere, so I apologise if I'm asking, but when should we expect the V5 version?

pc

[Denis Voituron (dvoituron)]

We cannot manage all cases and a Visible property can be quickly solved using a @if (like you explained).

Therefore this is not planned to add this parameter to all components for v4 and not planned for v5.

[Marvin Klein (MarvinKlein1508)]

Vincent Baaij (@vnbaaij) can you add a descriptions for the icons above?

[Terrence77]

Vincent Baaij (@vnbaaij) Denis Voituron (@dvoituron) What a great product you all have been working on for all of these years. Thank you.

https://fluentui-blazor-v5.azurewebsites.net/

I noticed the Templates link on this page: is broken.

https://fluentui-blazor-v5.azurewebsites.net/Templates

Thank you again for all of your hard work.

Terrence

[Denis Voituron (dvoituron)]

Thanks

Yes this documentation page is not yet finished. You can read this page: https://fluentui-blazor-v5.azurewebsites.net/installation

[Terrence77]

Thank you.

[Terrence77]

(should I move this to "Issues" ?)

I have been trying to get a running version of a .Net Maui Blazor Hybrid App Project running with v5 of your great framework.
Here are the steps I have taken, and the error below at the end.
I have included a zip of the project.

Thank you for your help gettting me going on converting my latest Budgeting Maui App.

1. Create .Net Maui Blazor Hybrid App Project

2. Add nuget.config file to root of app

3. Issued thess commands in Package Manager Console:
   Install-Package Microsoft.FluentUI.AspNetCore.Components -version 5.0.0-preview.25185.3
   dotnet add package Microsoft.FluentUI.AspNetCore.Components --prerelease
   dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons

4. Confirmed this project setting was not in my .csproj file:
   true

5. Added these to the _Imports.razor file:
   using Microsoft.FluentUI.AspNetCore.Components
   using Icons = Microsoft.FluentUI.AspNetCore.Components.Icons

6. Add this to the wwwroot/index.html file:

7. Removed the wwwroot/css/bootstrap/bootstrap.min.css file

8. Remove the boostrap ref in index.html:

9. Added to Program.cs
   builder.Services.AddFluentUIComponents();

10. Added to Mainlayout.razor
    

11. Replaced counter.razor with the code to Test the installation.

When I run the app and click on the "click me" button in the Counter.razor page I get this error:
Note the button is not styled.

blazor.webview.js:1
document.getElementById(...)?.show is not a function
TypeError: document.getElementById(...)?.show is not a function
at Object.d [as Show] (https://0.0.0.1/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js:5776:6034)
at https://0.0.0.1/_framework/blazor.webview.js:1:2891
at new Promise ()
at y.beginInvokeJSFromDotNet (https://0.0.0.1/_framework/blazor.webview.js:1:2848)
at https://0.0.0.1/_framework/blazor.webview.js:1:47076
at EventTarget. (:7:62)
at EmbeddedBrowserWebView. (:1:29616)
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
at Microsoft.FluentUI.AspNetCore.Components.FluentDialog.ShowAsync()
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)
NotifyUnhandledException @ blazor.webview.js:1

MauiApp2Fluent.zip

[Terrence77]

Ok, I look forward to your review of the issue and a great solution.

Thank you.
Terrence

[Terrence77]

Vincent Baaij (@vnbaaij) >>I have not had time to look at any way of doing Blazor Hybrid with v5

I know this must be low priority for you guys. Could you give me an indication of how low it is? I need to make some decisions on retooling my Budgeting windows store app from regular Blazor to Fluent.

If there is a sliver of a chance this might get looked into in the next month, I can move forward using your great components.

Thank you.

[Vincent Baaij (vnbaaij)]

Given the holiday period, I don't expect we will look into it in the coming month (I myself will be out most of that month)

But why not just start with the v4 library? For the end user, it is mostly just design updates. They will not be very aware that you are not using the latest version. On top, it buys you time to work on moving to v5 at a later time. It is not going to be a drop in replacement, but it is also not going to be a complete rewrite if you want to move from v4 to v5.

[Terrence77]

Vincent Baaij (@vnbaaij) >>But why not just start with the v4 library

Well, I guess that is a plan I should consider. I always want to be using the latest and greatest, but in this case, it makes sense.

Thank you.

[Vincent Baaij (vnbaaij)]

At this point, from a release perspective, v4 is the latest and greatest... 😁

[xiaoxin (hi-xiaoxin)]

May I ask if there is a release plan? For example, the first beta version (not Preview) can be used on NuGet.

[Marvin Klein (MarvinKlein1508)]

xiaoxin (@hi-xiaoxin) currently there is no planned release date yet. There is still much work todo as you can see above and it doesn't help that currently one of the maintainers is on vacation (well deserved btw.).

You can always test the current v5 branch on NuGet by following these instructions: https://github.com/microsoft/fluentui-blazor/blob/dev/docs/using-latest-daily.md

[Merlinstail]

Any update on progress. It reads as if there have been no updates since June

[Vincent Baaij (vnbaaij)]

Post has indeed not been updated for a while. Holiday period slowed us down. See the dev-v5 branch to follow along.

[Cody Mullins (codymullins)]

What is needed for DesignSystemProvider and DesignTheme?

[Marvin Klein (MarvinKlein1508)]

Vincent Baaij (@vnbaaij) DragContainer and DropZone can be marked as done as well

[f4n0 (f4n0)]

Is it normal that it break all the "standard" dependecies?

[Vincent Baaij (vnbaaij)]

No, that is not normal

[f4n0 (f4n0)]

Found the problem. My library was targeting .NET 8, 9 and 10.
Removing .NET 8, works

[Sebastian Hew (jingfee)]

I asked this same question in a related issue #4278 but adding it here as well since this may be the correct place for such questions.

I noticed that in the dev-v5-branch the ValidateClassNames-property have been removed from LibraryConfiguration.cs

What is the plan for this property going forward? It seems to have been removed from the dev-v5-branch since 2025-02-08 marked with TODO: Implement these properties. What is there to implement? It only seems to be used in the CssBuilder-class to check whether or not to validate against the classname-regex.

Is there another approach for this planned for v5?

[Vincent Baaij (vnbaaij)]

Denis replied in the linked issue