iTranslated by AI
Fluent UI v9 Has Been Released
I previously published the following article.
As mentioned in the latter part of that article, there was a plan to unify the two Fluent UIs. While I wasn't sure when that would happen, Fluent UI v9 was released in June 2022.
The main feature of Fluent UI v9 is the integration of @fluentui/react (v8: used in Office) and @fluentui/react-northstar (v0: used in Teams), as previously described. Since the site mentioned above also uses the designations v8 and v0, I will follow that convention here. Note that the package name for v9 is @fluentui/react-components.
v9 is based on v0, and v8 functionality is achieved by changing the theme to Web Light or Web Dark. However, the appearance is not perfectly compatible. The properties are also based on v0, but Shims are provided for some components to support v8.
As for theming, BrandVariants has been adopted, allowing for expression through a gradient of 10 to 160. A converter from v8 is also available, so by inputting your primary color on the site below, you can create a reasonable theme.
It is not yet fully mature, and some components remain unimplemented. You can check the roadmap on the page below. It seems it will be a little while longer before it is truly production-ready.
For icons, it is announced that you should use @fluentui/react-icons. Since there is a shortage of available icons at the moment, it is recommended to use @fluentui/react-icons-mdl2 or @fluentui/react-icons-mdl2-branded. Please be aware of the differences in licenses.
| Library Name | License Type |
|---|---|
| @fluentui/react-icons | MIT License |
| @fluentui/react-icons-mdl2 | MIT License |
| @fluentui/react-icons-mdl2-branded | Microsoft Fabric Assets License |
Discussion