The best React UI library

The React community stands out as one of the largest, but navigating through the multitude of libraries to find the right one that truly adds value to your business can be a challenging task.

This article aims to facilitate this process by undertaking a comparison of various React component libraries, aiding you in selecting the most suitable UI toolkit for your project.

To conduct this comparison, we will go through the following steps:

1. Initially, we'll compile an extensive list of React libraries that are potential candidates for the comparison.
2. Next, we'll gather statistics related to popularity, usage, and other relevant metrics.
3. Following that, we'll define a set of components that we intend to evaluate in each library.
4. Lastly, we'll compare the generated bundle size, performances and assess the licensing details of each library.

Libraries

Here is a list of libraries that may be suitable for our case. We can categorize them accordingly:

• UI libraries: reusable and configurable components
  • MUI (paid version available)
  • Ant-design
  • Chakra
  • React bootstrap
  • Blueprint
  • Mantine
  • Fluent UI
  • Semantic UI React
  • Evergreen
  • reactstrap
  • Next UI
  • Grommet
  • Rebass
  • Carbon
  • ThemeUI
  • PrimeReact
  • MDB (paid version available)
  • adminkit (paid version available)
  • Park UI
  • Shards (paid version available)
  • Foundation
  • PlainAdmin (paid version available)

• Headless libraries: components that come without styling, but with all the functionalities
  • shadcn-ui/ui
  • Daisy UI
  • Headless UI
  • Radix
  • React Aria
  • Ark UI
  • Tailwind UI (not free)

• Admin libraries: components that connect to the backend and manage all CRUD (Create, Read, Update, Delete) operations
  • React-admin (paid version available)
  • Refine (paid version available)
  • adminJS (paid version available)
  • Retool (not free)

While I've made an effort to include a diverse selection of libraries, it's possible that I've overlooked some. This list is not exhaustive, but it serves as our initial foundation for the upcoming steps.

Statistics

Below are the statistics for the libraries, accurate as of January 29, 2024:

Tailwind UI and Retool have no available data as they are not open-source solutions.

Regarding React-admin, Refine, and adminJS, the component count is not provided. This is because, being admin libraries, they primarily facilitate connections to backends rather than supplying individual components.

Components

For the comparison we will choose the context of building some back-office application with a need for advanced components, so we might be interested in the following:

• A table component for presenting data
• A Date-picker component
• A standalone calendar component
• A "toast" component (utilized for displaying information or error messages, for instance)
• An upload (dropzone) component

Additionally, it would be beneficial if the libraries also include:

• Some charts components
• A Rich Text Editor component
• A document preview component

However, if these are not available, we can consider using dedicated libraries for those purposes.

Here's a table indicating the availability of these components in each library:

Legend:

• ✅ : OK
• ❌ : KO
• 💵 : OK in paid version
• 🟠 : Moderately OK
• ⏳ : Planned in the future

Then let's calculate a score based on the previous table where ✅=1, 🟠=0.5, 💵=0.5.

We'll then identify and focus on the libraries that score above the average for the next steps.:

Bundle size

The bundle size comparison is down to the final six libraries.

Let's review the component table for these remaining libraries:

It's notable that each of the libraries features a table, a datepicker, and a toast component.

Now, let's assess the bundle size for these components.

The corresponding code for the comparison is available here.

And here are the results:

Performance evaluation​

To gauge performance, we've measured the number of times the app (utilizing the three components defined in the previous step) can render within one second.

The technical implementation is outlined as follows:

1. I introduced a counter within a button in the App component, which encompasses all three components.
2. Upon clicking the button, I record the current time and increment the counter state, initiating a new render of the App component.
3. Upon completion of the render, a useEffect is triggered, incrementing the counter once more and initiating another render.
4. After one second, the useEffect ceases to increment the counter, allowing us to retrieve the counter value, indicating the number of renders conducted.

The presented figures represent an average based on 10 calculations.

Here are the results, where a higher number indicates better performance:

 

License

Finally here is the license information for our selected libraries:

• MUI: MIT
• Ant-design: MIT
• Mantine: MIT
• React Aria: Apache-2.0 license
• Grommet: Apache-2.0 license
• PrimeReact: MIT

Conclusion​

In conclusion, considering its extensive array of over a hundred components, a commendable score of 6/8, a compact JS bundle size and great performances, Mantine emerges as the optimal solution for our specific case.

Moreover, I believe Mantine stands out as an excellent choice for any project seeking a dependable UI library, because it also

• boasts excellent documentation.
• enables customization of every component, providing flexibility when needed.