Smile news

The best React UI library

  • Date de l’évΓ©nement Mar. 07 2024
  • Temps de lecture min.

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:

LibrariesComponentsStarsIssuesPRweekly dlcreatedlast commit
MUI~7490.5k1.6k2213.5M18/08/201429/01/2024
Ant-design~7489.1k1k691.3M24/04/201529/01/2024
shadcn-ui/ui~4646.4k85128857k17/08/201928/01/2024
Chakra UI~6235.9k22962534k17/08/201925/01/2024
Daisy UI~5528.7k526263k27/12/201329/01/2024
React-admin-32.5k811958k13/07/201626/01/2024
Headless UI~1023.4k2121.6M16/09/202028/01/2024
Mantine~11823.2k409291k07/01/202129/01/2024
React bootstrap~3921.5k134471.9M27/12/201329/01/2024
Blueprint~6619.6k64235202k25/10/201625/01/2024
Refine-20.2k412315k20/01/202129/01/2024
Next UI~3818k2395765k22/04/202105/01/2024
Fluent UI~6714.7k493201191k06/06/201629/01/2024
Radix~3613.2k379701.3M19/06/201525/09/2023
Semantic UI React~4913k17221261k19/06/201530/12/2023
Evergreen~3512k403712k30/07/201721/06/2023
React Aria~3710.8k5545816k30/07/201727/01/2024
reactstrap~2910.6k24653497k30/07/201720/01/2024
Grommet~828.1k2664424k24/03/201527/01/2024
Rebass~87.9k465153k11/02/201503/08/2021
adminJS-6.7k1351722k23/11/201824/01/2024
Carbon~416.3k4894254k13/03/201726/01/2024
ThemeUI~364.9k50874k03/04/201924/01/2024
PrimeReact~893.5k18111118k16/12/201629/01/2024
Ark UI~363.5k14833k16/12/201629/01/2024
MDB~501.3k107k07/09/201729/01/2024
adminkit~601.1k005k16/12/201608/06/2024
Park UI~417431353k27/12/201829/01/2024
Shards~2774334151k27/12/201825/02/2019
Foundation~16602--7k21/03/202027/01/2023
PlainAdmin~15925301-30/05/202101/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:

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

LibrariesScoreSelected
PrimeReact6.5/8βœ…
Mantine6/8βœ…
MUI5/8βœ…
Ant-design5/8βœ…
Grommet5/8βœ…
React Aria4.5/8βœ…
Carbon4/8❌
Park UI4/8❌
Retool4/8❌
shadcn-ui/ui3.5/8❌
Ark UI3.5/8❌
MDB3.5/8❌
Blueprint3/8❌
Fluent UI3/8❌
Evergreen2.5/8❌
adminkit2.5/8❌
Daisy UI2/8❌
PlainAdmin2/8❌
Chakra UI1.5/8❌
React bootstrap1.5/8❌
Semantic UI React1.5/8❌
Radix1/8❌
reactstrap1/8❌
Next UI1/8❌
ThemeUI0.5/8❌
Headless UI0/8❌
Rebass0/8❌
Shards0/8❌
Foundation0/8❌

Bundle size

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

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

LibrariesTableCal.DateP.ToastChartDoc previewUploadRTEScore
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:

LibrariesTable onlyDatepicker onlyToast onlyAll 3 components
MUI665k JS468k JS235k JS826k JS
Ant-design751k JS479k JS288k JS877k JS
Mantine204k JS + 189k CSS296k JS + 199k CSS194k JS + 190k CSS334k JS + 199k CSS
React Aria299k JS343k JS194k JS462k JS
Grommet373k JS339k JS331k JS473k JS
PrimeReact636k JS + 159k CSS334k JS + 159k CSS312k JS + 159k CSS767k 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:

 

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

Tony Cabaye

Expert technique