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 | |
|---|---|---|---|
| Links | Github - Demo | Github - Link | Github - Demo |
| Status | 9k stars | 4.2k stars | 11.5k stars |
| Size | 100 KB gz | 20 KB gz | ? |
| Typescript source | ✔ | ✔ | JS with d.ts |
| Tree shaking | ✔ | ✔ | ✔ |
| WAI-ARIA | ✔ 1.1 | ✔ 1.1 | Yes, partial |
| Styles | Style props | React | LESS |
| Themes | styleConfig({...}), CSS-in-JS | Yes, reakit-system-bootstrap | LESS vars |
| Dark Theme | ✔ | N/A | N/A |
| Layout | Grid, Flex, Box | N/A | Container, Grid |
| Icons | ✔ | N/A | ✔ |
| Table | N/A | N/A | ✔ |
| Popover | ✔ | ✔ | ✔ Popper |
| Smart popover | ✔ | ✔ | ✔ |
| Table | N/A | N/A | ✔ |
Form
| Chakra | Reakit | Semantic UI React | |
|---|---|---|---|
| Form | uses Formik | Custom reakit/Form | Custom |
| Validation | Field validate prop | useFormState onValidate | react-hook-form |
| Field error style | ✔ | ✔ | Yes, error prop |
Modal
| Chakra | Reakit | Semantic UI React | |
|---|---|---|---|
| Syntax | Modal isOpen onClose | DialogBackdrop, Dialog | Modal open, Modal.Content |
| Animating | ✔ CSS? | ✔ CSS | ✔ |
| Nested | ? | ✔ | ? |
Mobile Browser
| Chakra | Reakit | Semantic UI React | |
|---|---|---|---|
| Touch / Tap | ✔ | ✔ | ✔ |
| Smooth animation | ✔ | ✔ | ✔ |
| Accordion | Works | N/A | Works |
| Drawer / Sidebar | Works | N/A | Works |
| Modal | Works | Works, body shifted | Works, partially cut off |
| Modal scroll | Works | ? | Works, partially cut off |
| Popover | Works | Works | Works |
| Table | ? | ? | Works |
| Tooltip | Works | Works |
Summary
| Chakra | Reakit | Semantic UI React | |
|---|---|---|---|
| Strengths | + Many components | + Small size | + Many components |
| + Style props (inspired by Tailwinds) | + Lower level components | + Layouts | |
| + Layouts | |||
| Need improvements | Need more components, layouts | Better demos for mobile |
FAQ
I also evaluated other libraries: Rebass, Material UI, Atlaskit, Fluent, Spectrum, PatternFly, etc. They may get into this list later.
Found a mistake? - Please feel free to create a ticket.
Want to suggest a UI Component Library? - If it's comparable with the above projects, please feel free to create a ticket.
For the latest updates, please visit syntax.wiki/articles/react-component-library-comparison.
Top comments (0)