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:

Libraries	Components	Stars	Issues	PR	weekly dl	created	last commit
MUI	~74	90.5k	1.6k	221	3.5M	18/08/2014	29/01/2024
Ant-design	~74	89.1k	1k	69	1.3M	24/04/2015	29/01/2024
shadcn-ui/ui	~46	46.4k	851	288	57k	04/01/2023	28/01/2024
Chakra UI	~62	35.9k	229	62	534k	17/08/2019	25/01/2024
Daisy UI	~55	28.7k	52	6	263k	28/11/2020	29/01/2024
React-admin	-	23.5k	81	19	58k	13/07/2016	26/01/2024
Headless UI	~10	23.4k	21	2	1.6M	16/09/2020	28/01/2024
Mantine	~118	23.2k	40	9	291k	07/01/2021	29/01/2024
React bootstrap	~39	22.1k	134	47	1.9M	27/12/2013	29/01/2024
Blueprint	~66	20.3k	642	35	202k	25/10/2016	25/01/2024
Refine	-	20.2k	41	23	15k	20/01/2021	29/01/2024
Next UI	~38	18k	239	57	65k	22/04/2021	05/01/2024
Fluent UI	~67	17.3k	493	201	191k	06/06/2016	29/01/2024
Radix	~36	13.3k	379	70	1.3M	19/06/2020	25/09/2023
Semantic UI React	~49	13.1k	172	21	261k	19/06/2015	30/12/2023
Evergreen	~35	12.3k	40	37	12k	30/07/2017	21/06/2023
React Aria	~37	10.9k	554	58	16k	13/09/2019	27/01/2024
reactstrap	~29	10.6k	246	53	497k	19/02/2016	20/01/2024
Grommet	~82	8.3k	266	44	24k	24/03/2015	27/01/2024
Rebass	~8	7.9k	46	51	53k	11/02/2015	03/08/2021
adminJS	-	7.7k	135	17	22k	23/11/2018	24/01/2024
Carbon	~41	7.3k	489	42	54k	13/03/2017	26/01/2024
ThemeUI	~36	5.2k	50	8	74k	03/04/2019	24/01/2024
PrimeReact	~89	5.2k	181	11	118k	16/12/2016	29/01/2024
Ark UI	~36	2.7k	14	8	33k	26/10/2022	29/01/2024
MDB	~50	1.4k	1	0	7k	07/09/2017	29/01/2024
adminkit	~60	1.3k	0	0	5k	21/03/2020	08/06/2024
Park UI	~41	903	13	5	3k	02/08/2023	29/01/2024
Shards	~27	755	34	15	1k	27/12/2018	25/02/2019
Foundation	~16	601	-	-	7k	21/03/2020	27/01/2023
PlainAdmin	~159	321	0	1	-	30/05/2021	01/09/2023

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:

Libraries	Table	Calendar	Datepicker	Toast	Chart	Doc preview	Upload	RTE
MUI	✅💵	🟠	✅	✅	✅⏳	❌	🟠	❌
Ant-design	✅	🟠	✅	✅	🟠	❌	✅	❌
shadcn-ui/ui	✅	🟠	✅	✅	❌	❌	❌	❌
Chakra UI	🟠	❌	❌	✅	❌	❌	❌	❌
Daisy UI	✅	❌	❌	✅	❌	❌	❌	❌
Headless UI	❌	❌	❌	❌	❌	❌	❌	❌
Mantine	✅	🟠	✅	✅	🟠	❌	✅	✅
React bootstrap	🟠	❌	❌	✅	❌	❌	❌	❌
Blueprint	✅	❌	✅	✅	❌	❌	❌	❌
Next UI	✅	❌	❌	❌	❌	❌	❌	❌
Fluent UI	✅	🟠	✅	🟠	❌	❌	❌	❌
Radix	❌	❌	❌	✅	❌	❌	❌	❌
Semantic UI React	✅	❌	❌	🟠	❌	❌	❌	❌
Evergreen	🟠	❌	❌	✅	❌	❌	✅	❌
React Aria	✅	🟠	✅	✅	❌	❌	✅	❌
reactstrap	🟠	❌	❌	🟠	❌	❌	❌	❌
Grommet	✅	🟠	✅	🟠	✅	❌	✅	❌
Rebass	❌	❌	❌	❌	❌	❌	❌	❌
Carbon	✅	❌	✅	✅	❌	❌	✅	❌
ThemeUI	❌	❌	❌	🟠	❌	❌	❌	❌
PrimeReact	✅	🟠	✅	✅	✅	❌	✅	✅
Ark UI	❌	🟠	✅	✅	❌	❌	✅	❌
MDB	💵	💵	💵	💵	💵	❌	💵	💵
AdminKit	🟠	❌	❌	💵	✅💵	❌	🟠	❌
Park UI	🟠	🟠	✅	✅	❌	❌	✅	❌
Shards	❌	❌	❌	❌	❌	❌	❌	❌
Foundation	❌	❌	❌	❌	❌	❌	❌	❌
PlainAdmin	💵	💵	❌	❌	💵	❌	❌	💵
Retool	💵	💵	💵	💵	💵	💵	💵	💵

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.:

Libraries	Score	Selected
PrimeReact	6.5/8	✅
Mantine	6/8	✅
MUI	5/8	✅
Ant-design	5/8	✅
Grommet	5/8	✅
React Aria	4.5/8	✅
Carbon	4/8	❌
Park UI	4/8	❌
Retool	4/8	❌
shadcn-ui/ui	3.5/8	❌
Ark UI	3.5/8	❌
MDB	3.5/8	❌
Blueprint	3/8	❌
Fluent UI	3/8	❌
Evergreen	2.5/8	❌
adminkit	2.5/8	❌
Daisy UI	2/8	❌
PlainAdmin	2/8	❌
Chakra UI	1.5/8	❌
React bootstrap	1.5/8	❌
Semantic UI React	1.5/8	❌
Radix	1/8	❌
reactstrap	1/8	❌
Next UI	1/8	❌
ThemeUI	0.5/8	❌
Headless UI	0/8	❌
Rebass	0/8	❌
Shards	0/8	❌
Foundation	0/8	❌

Bundle size

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

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

Libraries	Table	Cal.	DateP.	Toast	Chart	Doc preview	Upload	RTE	Score
MUI	✅💵	🟠	✅	✅	✅⏳	❌	🟠	❌	5/8
Ant-design	✅	🟠	✅	✅	🟠	❌	✅	❌	5/8
Mantine	✅	🟠	✅	✅	🟠	❌	✅	✅	6/8
React Aria	✅	🟠	✅	✅	❌	❌	✅	❌	4.5/8
Grommet	✅	🟠	✅	🟠	✅	❌	✅	❌	5/8
PrimeReact	✅	🟠	✅	✅	✅	❌	✅	✅	6.5/8

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:

Libraries	Table only	Datepicker only	Toast only	All 3 components
MUI	665k JS	468k JS	235k JS	826k JS
Ant-design	751k JS	479k JS	288k JS	877k JS
Mantine	204k JS + 189k CSS	296k JS + 199k CSS	194k JS + 190k CSS	334k JS + 199k CSS
React Aria	299k JS	343k JS	194k JS	462k JS
Grommet	373k JS	339k JS	331k JS	473k JS
PrimeReact	636k JS + 159k CSS	334k JS + 159k CSS	312k JS + 159k CSS	767k JS + 159k CSS

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:

Libraries	Number of render per second
MUI	~1210
Ant-design	~770
Mantine	~1650
React Aria	~350
Grommet	~820
PrimeReact	~270

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.