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.
| 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 | ✔ | ✔ |
| 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 | ✔ |
| Chakra | Reakit | Semantic UI React | Material UI |
|---|
| Syntax | Modal isOpen onClose | DialogBackdrop, Dialog | Modal open, Modal.Content | Modal, Dialog |
| Animating | ✔ CSS? | ✔ CSS | ✔ | ✔ |
| Nested | ? | ✔ | ? | ✔ |
| 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 |
| 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 | |
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.