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

NBC = Native Blazor Component

15 april 2025: Added: Accoridion/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 In Progress
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
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	✅
MainLayout	✅
Menu	✅	✅
MenuButton		🆕✅
MenuItem	✅	✅
MenuList		🆕✅
MessageBar	✅		Look at replacing with WC implementation
MessageBar		🆕	WIP
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	✅
RatingDisplay		🆕✅
Search	✅	⚠️	No V3 Web Component available
Select	✅	✅
Skeleton	✅	⚠️	No V3 Web Component available
Slider	✅	✅
SliderLabel	✅	⚠️	⛔️ Deprecated → See label, field
SortableList	✅
Spacer	✅	✅
Spinner		🆕✅
Splitter	✅
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.