DEV Community

loading...
Cover image for Compare React Component Libraries in September 2020

Compare React Component Libraries in September 2020

ngduc profile image Duc Ng ・2 min read

Compare React Component Libraries in September 2020

Recently, I need to evaluate many React Component Libraries so I tried them all, compared and took some notes about them in a table format. Hope you find it useful.

Please note that I didn't intend to cover all libraries, only the ones with latest techs like Typescript, latest changes, etc.

Features

Chakra UI Reakit Semantic UI React Material UI
Links Github - Demo Github - Link Github - Demo Github - Blog - Demo
Status 9k ★ since 06-2019 4.2k ★ since 01-2018 11.5k ★ since 10-2016 61k ★ since 08-2014
Components ~52 ~22 ~52 ~55
Size 100 KB gz 20 KB gz ? 404 KB
Tree shaking
Typescript source JS with d.ts JS with d.ts
WAI-ARIA ✔ 1.1 ✔ 1.1 Yes, partial Yes, partial
Styles Style props React LESS JSS
Themes styleConfig({...}), CSS-in-JS Yes, reakit-system-bootstrap LESS vars "classes" prop
Dark Theme N/A N/A
Layout Grid, Flex, Box N/A Container, Grid Box, Container, Grid
Icons N/A
Popover ✔ Popper ✔ Popper
Table N/A N/A

Form

Chakra Reakit Semantic UI React Material UI
Form uses Formik reakit/Form ✔ Formik works
Validation Field validate prop useFormState onValidate react-hook-form Formik validate
Field error style Yes, error prop

Modal

Chakra Reakit Semantic UI React Material UI
Syntax Modal isOpen onClose DialogBackdrop, Dialog Modal open, Modal.Content Modal, Dialog
Animating ✔ CSS? ✔ CSS
Nested ? ?

Mobile Browser

Chakra Reakit Semantic UI React Material UI
Touch / Tap
Smooth animation
Accordion Works N/A Works Works
Drawer / Sidebar Works N/A Works Works
Modal Works Works, body shifted Works, partially cut off Works
Modal scroll Works ? Works, partially cut off Works
Popover Works Works Works Works
Table ? ? Works Works
Tooltip Works Works Works Works

Summary

Chakra Reakit Semantic UI React Material UI
Strengths + Many components + Small size + Many components + Many components
+ Style props (inspired by Tailwinds) + Lower level components + Layouts + Works well on mobile
+ Layouts + Layout
Need improvements Need more components, layouts Better demos for mobile

FAQ

Obviously not every library can be evaluated and added, but I also evaluated other libraries: Carbon (IBM), Rebass, Atlaskit, Fluent UI (Fabric, Microsoft), Lucid UI, Grommet, Spectrum, PatternFly, etc. They may get into this list later.

For the latest updates, please visit nnote.cc/s/0wihj.

Discussion

pic
Editor guide
Collapse
dmitru profile image
Dmitry Borody

Hey, thanks for the comparison!

I'd love to see how active these libraries are maintained, e.g. I've heard that Semantic UI isn't being developed actively.

Here are some metrics that would IMHO complement this comparison nicely:

  • number of open issues
  • last version release date
  • last commit date
Collapse
ngduc profile image
Duc Ng Author

Hi, I only evaluate active project. From their repo github.com/Semantic-Org/Semantic-U... - looks like there are new releases recently.

Good ideas on other metrics, I'll update it. Thanks!

Collapse
metruzanca profile image
Samuele Zanca

What about antd?
Curious to see what other have to say about it since I use it at my current workplace and when I wrestled with its tables(adding buttons to perform actions on the row) and testing it I ran into some difficulties (mainly it not being intuitive). Wondering if its how I approached it or if others have experienced similar things.