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)