Compare React Component Libraries in August 2020

#webdev #react #component #library

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