V5: What is the status?

[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://fluentui-blazor-v5.azurewebsites.net/

We will try to keep this table updated.

WC = Web Component
ToDo:
-MessageBar
-TreeView/TreeItem

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

NBC = Native Blazor Component

3 June 2025: Added Card, ErrorBoundary, Highlighter, InputFile, KeyCode and TreeView/TreeItem
15 april 2025: Added: Accordion/AccordionItem, Radio/RadioGroup, MultiSplitter and Image
5 april 2025: Added: Spacer,
1 April 2025: Initial status overview

Component	V4	V5	Notes
AccessibilityStatus	✅
Accordion	✅	✅
AccordionItem	✅	✅
Anchor	✅	⚠️	⛔️ Renamed → See Link, AnchorButton
AnchorButton		🆕✅
AnchoredRegion	✅	⚠️	⛔️ Deprecated
AppBar	✅
AppBarItem	✅
AutoComplete	✅
Avatar		🆕✅
Badge	✅	✅
BodyContent	✅
Breadcrumb	✅	⚠️	No V3 Web Component available
BreadcrumbItem	✅	⚠️	No V3 Web Component available
Button	✅	✅
Calendar	✅		Keep using NBC
Calendar	✅	⚠️	No V3 Web Component available. Keep using NBC
Card	✅	✅	🚧 WC still in progress. We use own implementation for now
Checkbox	✅	✅
CollapsibleRegion	✅
Color	✅	⚠️	No
Web Component available. Via TextInput?
Combobox	✅	✅
CompoundButton		🆕✅
CounterBadge	✅	✅
DataGrid	✅		Keep using NBC
DataGrid	✅	⚠️	🚧 WC In Progress. Keep using NBC
DatePicker	✅		Keep using NBC
DesignSystemProvider	✅
DesignTheme	✅
Dialog	✅	✅	⚠️ API Change → Split into two components to allow for more expressive modals.
DialogBody		🆕✅
Divider	✅	✅
DragContainer	✅
Drawer		🆕✅
DrawerBody		🆕✅
Dropdown		✅
DropZone	✅
EditForm	✅
Emojis	✅		Align component name / namespace
ErrorBoundary		🆕✅
Field		🆕✅
Flipper	✅	⚠️	No V3 Web Component available
Footer	✅
Footer	✅	✅	LayoutItem Area=Footer
Grid	✅	✅
GridItem	✅	✅
Header	✅	✅	LayoutItem Area=Header
Highlighter	✅	✅
HorizontalScroll	✅	⚠️	No V3 Web Component available
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	✅		Look at replacing with WC implementation
MultiSplitter	✅	✅
MultiSplitterPane	✅	✅
NavGroup	✅
NavLink	✅
NavMenu	✅
NavMenuGroup	✅	⛔️	Deprecated
NavMenuLink	✅	⛔️	Deprecated
NavMenuTree	✅	⛔️	Deprecated
NumberField	✅	⚠️	No V3Web Component available
Overflow	✅
OverflowItem	✅
Overlay	✅
Paginator	✅
Persona	✅
Popover	✅		WC implementation?
PresenceBadge	✅
ProfileMenu	✅
Progress	✅	🔀	⛔️ Renamed → See progress-bar
ProgressBar		✅	(Renamed)
ProgressRing	✅	🔀	⛔️ Renamed → See spinner
PullToRefresh	✅
Radio	✅	✅	Refactoring incoming
RadioGroup	✅	✅	Refactoring incoming
Rating	✅		Renamed to RatingDisplay
RatingDisplay		🆕✅
Search	✅	⚠️	No V3 Web Component available
Select	✅	✅
Skeleton	✅	⚠️	No V3 Web Component available
Slider	✅	✅
SliderLabel	✅	⚠️	⛔️ Deprecated → See label, field
SortableList	✅
Spacer	✅	✅
Spinner		🆕✅
Splitter	✅		Replaced by MultiSplitter
Stack	✅	✅
Switch	✅	✅
Tab	✅	✅
Tablist		🆕
TabPanel	✅	⚠️✅	⛔️ Deprecated
Tabs	✅	⚠️✅	⛔️ Deprecated → See tablist
Text		🆕✅	Replaces Label
TextArea	✅	✅
Text-field	✅	🔀	⛔️ Renamed→ See text-input
TextInput		✅	(Renamed)
TimePicker	✅
Toast	✅
ToastProvider	✅
Toolbar	✅	⚠️	No V3 Web Component available
Tooltip	✅	✅	⚠️
TreeItem	✅	✅
TreeView	✅	✅
ValidationMessage	✅
ValidationSummary	✅
Wizard	✅

[hi-xiaoxin]

Hi @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?

[vnbaaij]

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

[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 ? :)

[dvoituron]

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

[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

[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.

[MarvinKlein1508]

@vnbaaij can you add a descriptions for the icons above?

[Terrence77]

@vnbaaij @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

[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

[vnbaaij]

No need to create an issue for this. It is most likely a configuration thing and not a problem in the library.

Maybe you can try starting your project by using our Fluent .NET MAUI Blazor Hybrid and Web App (see https://www.fluentui-blazor.net/Templates) and once you've confirmed that is working, upgrade the core package and do the needed components migration steps.

[Terrence77]

Ok, I will give that a try. Thank you.

[Terrence77]

@vnbaaij I have created a Fluent .NET MAUI Blazor Hybrid and Web App and upgraded it to v5.

In the Maui project I am still getting the error when calling:

	await DialogService.ShowInfoAsync("Counter Incremented");

This does NOT error out in the Web project.

Really hoping to get past this error so I can start my Maui project conversion to FluentMauiBlazorV5.

Thank you
Terrence

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

[vnbaaij]

It is probably an issue with the way the web components script tries to work with the Blazor Hybrid WebView.
I have not had time to look at any way of doing Blazor Hybrid with v5

[Terrence77]

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

Thank you.
Terrence