iTranslated by AI
Understanding the Two Versions of Fluent UI
Introduction
Fluent UI is a UI framework for React developed by Microsoft. Since it can represent a UI integrated into Microsoft 365, it is an essential framework for Microsoft 365 development. There are two types of frameworks named Fluent UI, which causes confusion, so I will organize them here. If you are comfortable with English, I recommend checking the official wiki.
Differences between the frameworks
@fluentui/react
This was originally called Office UI Fabric, and the name was changed because its scope of application is not limited to Office. office-ui-fabric-react and @fluentui/react are the same, but starting with the next major version (version 8), only @fluentui/react will be provided. Office apps are implemented based on this, and it is used when creating apps with the SharePoint Framework.
@fluentui/react-northstar
This was originally called Stardust, and it was created completely separately from @fluentui/react, so there is no compatibility. Microsoft Teams is implemented based on this, and it is used when creating Teams apps.
Future of the frameworks
These two frameworks are planned to be integrated in the future. However, support for neither @fluentui/react nor @fluentui/react-northstar will be terminated. Use @fluentui/react when creating apps with the SharePoint Framework. Use @fluentui/react-northstar when creating Teams apps. If you want to use them for other general websites, please make a decision based on a comprehensive assessment.
Conclusion
When you are doing SharePoint Framework development and start Microsoft Teams development, you may get confused because there is no compatibility at all. Given the names, it is easy to think that they just have different themes, but you need to learn both. I hope they will be integrated soon, and I look forward to the future.
Discussion