Compare React Component Libraries in September 2020
Tags: webdev, react, component, library
Published: 2020-09-09 21:47:29

---
title: Compare React Component Libraries in September 2020
published: true
description: I evaluated many React Component Libraries and compare them in a table format.
tags: webdev, react, component, library
cover_image: https://images.unsplash.com/photo-1522542550221-31fd19575a2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80
---

# 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](https://github.com/chakra-ui/chakra-ui) - [Demo](https://next.chakra-ui.com/docs/getting-started) | [Github](https://github.com/reakit/reakit) - [Link](https://reakit.io/docs/get-started/) | [Github](https://github.com/Semantic-Org/Semantic-UI-React) - [Demo](https://react.semantic-ui.com/) | [Github](https://github.com/mui-org/material-ui) - [Blog](https://medium.com/material-ui) - [Demo](https://material-ui.com/components/box/) |
| 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](https://nnote.cc/s/0wihj/compare-react-component-libraries-in-september-2020).