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.
Top comments (3)
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:
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!
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.