What's The Best React Component Library? Hello Fluent UI

Feb 25, 2022 3 minutes read
fluentui aka.ms

In carrying out each new web project, there comes a point where it is necessary to establish a technology stack. The selection of appropriate tools, frameworks, and libraries sometimes has a decisive impact on the efficiency of the project and the implementation timeline. It affects the effectiveness of software updates, licensing issues, the guarantee of development stability, and likely several other factors.

When deciding on tool selection, we should pay attention to each of the following aspects:

  • Who is the main developer?
  • What is the license?
  • Is it stable?
  • How frequently are updates released?

Or simply the credibility and readiness for business support. But the mere presence of a big player doesn't always provide guarantees - as an example you can find here Google projects that have been abandoned and/or terminated.

Fluent UI

The Fluent UI (it was previously called Fabric UI) library is an open-source, cross-platform design system developed by Microsoft that caters to mobile, desktop, and web applications. A popular part of this is the Fluent UI React library, a collection of robust React components designed for building web applications in line with Microsoft's Fluent Design System. As Microsoft powers some of the world's most widely used software, the Fluent UI brings this familiar design language to your web applications.

One of the prominent selling points of Fluent UI React is its ease of integration. If you are already working with a React-based application, adding Fluent UI components to your project is a breeze. These components are performance-optimized and fully customizable, meaning you can easily tailor them to match your brand's aesthetics without compromising the user experience or performance.

Consistent Design

This is the biggest advantage of Fluent UI. I remember when Google introduced Material Design (right after Angular 1), all websites started to resemble Google. The same can happen with Fluent UI; Microsoft consistently maintains this UI kit. And the unfortunate year of 2019 increased Microsoft's user base (even in the realm of remote learning).

entrie financial system - twitter.com @nixcraft

The advantage of Fluent UI React is the explicit support for Microsoft's Office and Office365 suite. If you're developing applications intended to work closely with Microsoft Office products, Fluent UI React is a no-brainer choice. Its library contains components designed specifically for Office and Teams, and its design language mirrors that of the Office suite, creating a seamless user experience for Office users.

What about others?

When compared with other UI libraries, Fluent UI React stands out with its commitment to a cohesive, familiar user experience across various platforms, exceptional accessibility support, and native integration with Microsoft Office suite. Bootstrap or Material-UI may offer a more extensive range of components, but if your priority lies in performance optimization, a unified design language, or Microsoft product integration, Fluent UI is a compelling alternative.


However, Fluent UI React is not without its challenges. Like any other library, there is a learning curve, particularly if you're coming from a different UI library or framework. Some users have also noted that Fluent UI's documentation is not as thorough as some of its competitors, which could make onboarding more challenging. Nonetheless, Microsoft has been committed to regularly updating and enhancing the library, so these are areas of potential growth.

Just give it a try BUT remember, there is also another page about terminated projects 🤭 

Fluent UI - Github

Fluent UI - Storybook

Fluent UI - Controls docs

Disclaimer: The opinions expressed here are my own and do not necessarily represent those of current or past employers.
Comments (0)