Compare React Component Libraries

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 UIReakitSemantic UI ReactMaterial UI
LinksGithub - DemoGithub - LinkGithub - DemoGithub - Blog - Demo
Status9k ★ since 06-20194.2k ★ since 01-201811.5k ★ since 10-201661k ★ since 08-2014
Components~52~22~52~55
Size100 KB gz20 KB gz?404 KB
Tree shaking
Typescript sourceJS with d.tsJS with d.ts
WAI-ARIA✔ 1.1✔ 1.1Yes, partialYes, partial
StylesStyle propsReactLESSJSS
ThemesstyleConfig({...}), CSS-in-JSYes, reakit-system-bootstrapLESS vars"classes" prop
Dark ThemeN/AN/A
LayoutGrid, Flex, BoxN/AContainer, GridBox, Container, Grid
IconsN/A
Popover✔ Popper✔ Popper
TableN/AN/A

Form

ChakraReakitSemantic UI ReactMaterial UI
Formuses Formikreakit/Form✔ Formik works
ValidationField validate propuseFormState onValidatereact-hook-formFormik validate
Field error styleYes, error prop
ChakraReakitSemantic UI ReactMaterial UI
SyntaxModal isOpen onCloseDialogBackdrop, DialogModal open, Modal.ContentModal, Dialog
Animating✔ CSS?✔ CSS
Nested??

Mobile Browser

ChakraReakitSemantic UI ReactMaterial UI
Touch / Tap
Smooth animation
AccordionWorksN/AWorksWorks
Drawer / SidebarWorksN/AWorksWorks
ModalWorksWorks, body shiftedWorks, partially cut offWorks
Modal scrollWorks?Works, partially cut offWorks
PopoverWorksWorksWorksWorks
Table??WorksWorks
TooltipWorksWorksWorksWorks

Summary

ChakraReakitSemantic UI ReactMaterial 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 improvementsNeed more components, layoutsBetter 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.