loading...
Cover image for Compare React Component Libraries in August 2020

Compare React Component Libraries in August 2020

ngduc profile image Duc Ng ・2 min read

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.

Posted on by:

ngduc profile

Duc Ng

@ngduc

JS enthusiast / 17y tinkering with screens & code.

Discussion

markdown guide