The best React UI library

  • 29 Jan 2024

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:

 

 

 

 

  • Admin libraries: components that connect to the backend and manage all CRUD (Create, Read, Update, Delete) operations

 

 

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 17/08/2019 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 27/12/2013 29/01/2024
React-admin - 32.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 21.5k 134 47 1.9M 27/12/2013 29/01/2024
Blueprint ~66 19.6k 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 14.7k 493 201 191k 06/06/2016 29/01/2024
Radix ~36 13.2k 379 70 1.3M 19/06/2015 25/09/2023
Semantic UI React ~49 13k 172 21 261k 19/06/2015 30/12/2023
Evergreen ~35 12k 40 37 12k 30/07/2017 21/06/2023
React Aria ~37 10.8k 554 58 16k 30/07/2017 27/01/2024
reactstrap ~29 10.6k 246 53 497k 30/07/2017 20/01/2024
Grommet ~82 8.1k 266 44 24k 24/03/2015 27/01/2024
Rebass ~8 7.9k 46 51 53k 11/02/2015 03/08/2021
adminJS - 6.7k 135 17 22k 23/11/2018 24/01/2024
Carbon ~41 6.3k 489 42 54k 13/03/2017 26/01/2024
ThemeUI ~36 4.9k 50 8 74k 03/04/2019 24/01/2024
PrimeReact ~89 3.5k 181 11 118k 16/12/2016 29/01/2024
Ark UI ~36 3.5k 14 8 33k 16/12/2016 29/01/2024
MDB ~50 1.3k 1 0 7k 07/09/2017 29/01/2024
adminkit ~60 1.1k 0 0 5k 16/12/2016 08/06/2024
Park UI ~41 743 13 5 3k 27/12/2018 29/01/2024
Shards ~27 743 34 15 1k 27/12/2018 25/02/2019
Foundation ~16 602 - - 7k 21/03/2020 27/01/2023
PlainAdmin ~159 253 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
React bootstrap 🟠
Blueprint
Headless UI
Mantine 🟠 🟠
Fluent UI 🟠 🟠
Radix
Semantic UI React 🟠
Evergreen 🟠
React Aria 🟠
reactstrap 🟠 🟠
Next UI
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.