A one-stop-shop for comparing the features of all the best React frameworks

React UI Roundup

Are you a frontend developer or designer? Do you wish you had a one-stop-shop you could go to see the various implementations of common components? If so - React UI Roundup is for you!

I decided to make this project while contributing an Alert component to material-ui. While thinking about that component, it was HUGELY helpful to review other implementations from everything from feature set, DOM structure, CSS usage, theming integration, prop naming, and more. I wanted something where I could stand back at a distance and look at many high-quality implementations of a similar component while I researched - so I made this project.

An even more better version of this exact document is available at react-ui-roundup.dimitrimitropoulos.com. It has special “Open All” buttons that allow you to open every link in a table with one click! Also, the Framework Statistics section on the website is always up to date since it pulls the data in realtime when you load the page.

Frameworks

Framework Statistics

Name	Homepage	Repository	Stars	Forks	Issues	License
Ant Design	ant.design	ant-design/ant-design	63,025	23,929	494	MIT
Atlaskit	atlassian.design	bitbucket.org/atlassian/atlaskit-mk-2	–	–	–	–
Blueprint	blueprintjs.com	palantir/blueprint	16,653	1,716	526	Apache 2.0
Carbon Design	react.carbondesignsystem.com	carbon-design-system/carbon	3,429	764	410	Apache 2.0
Chakra UI	chakra-ui.com	chakra-ui/chakra-ui	10,165	677	85	MIT
Elastic UI	elastic.github.io/eui	elastic/eui	2,194	384	359	Apache 2.0
Element	element.eleme.io	ElemeFE/element	47,064	11,312	2,016	MIT
Elemental UI	elemental-ui.com	elementalui/elemental	4,318	248	50	MIT
Evergreen	evergreen.segment.com	segmentio/evergreen	10,009	569	76	MIT
Gestalt	gestalt.netlify.app	pinterest/gestalt	3,615	261	12	Apache 2.0
Grommet	v2.grommet.io	grommet/grommet	6,594	790	233	Apache 2.0
Material UI	material-ui.com	mui-org/material-ui	60,626	17,805	460	MIT
Onsen UI	onsen.io	OnsenUI/OnsenUI	8,072	918	141	Apache 2.0
Orbit	orbit.kiwi	kiwicom/orbit	697	66	55	MIT
Prime React	primefaces.org/primereact	primefaces/primereact	1,508	370	211	MIT
Quasar	quasar.dev	quasarframework/quasar	16,056	1,864	225	MIT
React Bootstrap	react-bootstrap.github.io	react-bootstrap/react-bootstrap	18,205	2,910	96	MIT
React Toolbox	react-toolbox.io	react-toolbox/react-toolbox	8,630	1,050	262	MIT
react-md	react-md.mlaursen.com	mlaursen/react-md	2,118	308	41	MIT
Ring UI	jetbrains.github.io/ring-ui	JetBrains/ring-ui	2,484	131	10	Apache 2.0
Semantic UI	semantic-ui.com	Semantic-Org/Semantic-UI	48,410	5,081	1,016	MIT
Smooth UI	smooth-code.com/open-source/smooth-ui	smooth-code/smooth-ui	1,530	111	10	MIT
UI Fabric	developer.microsoft.com/en-us/fluentui	microsoft/fluentui	9,307	1,685	953	Other
Zendesk Garden	garden.zendesk.com	zendeskgarden/react-components	787	51	10	Apache 2.0

all of the above statistics were last updated Thu, 03 Sep 2020 00:36:11 GMT. For real-time data, see the website.

Framework Features

Criteria

Native Dark Mode: The project is made with dark-mode styling in mind. An out-of-the-box dark mode is either used on the docs site itself or well documented and easy to configure.
Design Kits: Ready-made resources exist for designers such as Sketch or Figma download packs.
RTL Support: Explicit right-to-Left support for use in apps with languages like Arabic, Hebrew, or Persian.
Themer: A user-interactable theming area where designers and developers can play around with look and feel without needing to do any programming.
Native TypeScript: Is either written in TypeScript (ideally) or has TypeScript definitions directly in the project. DefinitelyTyped does not qualify.

Name	Native Dark Mode	Design Kits	RTL Support	Themer	Native TypeScript
Ant Design	✔️	Figma, Sketch	✔️	Link	✔️
Atlaskit	❌	Sketch	❌	❌	❌
Blueprint	✔️	Sketch	✔️	❌	✔️
Carbon Design	✔️	Sketch	✔️	Link	❌
Chakra UI	✔️	❌	❌	❌	❌
Elastic UI	✔️	Sketch	❌	❌	✔️
Element	❌	Axure, Sketch	❌	Link	❌
Elemental UI	❌	❌	❌	❌	❌
Evergreen	❌	Sketch	❌	❌	❌
Gestalt	❌	❌	✔️	❌	❌
Grommet	❌	Custom, Framer X, Sketch	✔️	Link	✔️
Material UI	✔️	Figma, Sketch	✔️	Link	✔️
Onsen UI	✔️	❌	❌	❌	✔️
Orbit	❌	Abstract, Sketch	✔️	Link	❌
Prime React	✔️	❌	❌	❌	❌
Quasar	✔️	❌	✔️	Link	✔️
React Bootstrap	❌	❌	❌	❌	✔️
React Toolbox	❌	❌	❌	❌	✔️
react-md	✔️	❌	❌	❌	✔️
Ring UI	❌	❌	❌	❌	❌
Semantic UI	❌	Sketch	✔️	❌	❌
Smooth UI	✔️	❌	❌	❌	❌
UI Fabric	✔️	Figma, Sketch	❌	❌	✔️
Zendesk Garden	❌	❌	✔️	❌	✔️

Components

Alert

Alerts are used to show an important message to users.

Criteria

Closable: The alert has an “out of the box” way to dismiss, usually with an onClose prop.
Types: The alert has ready-made variations.

Framework	Name	Closable	Types
Ant Design	Alert	✔️	`error`, `info`, `success`, `warning`
Atlaskit	SectionMessage	❌	`change`, `confirmation`, `error`, `info`, `warning`
Atlaskit	Flag	❌	`change`, `confirmation`, `error`, `info`, `warning`
Chakra UI	Alert	✔️	`error`, `info`, `success`, `warning`
Element	Alert	✔️	`error`, `info`, `success`, `warning`
Elemental UI	Alert	❌	`danger`, `info`, `primary`, `success`, `warning`
Evergreen	Alert	✔️	`danger`, `none`, `success`, `warning`
Material UI	Alert	✔️	`error`, `info`, `success`, `warning`
Orbit	Alert	✔️	`critical`, `info`, `success`, `warning`
Quasar	banner	❌
React Bootstrap	Alert	✔️	`danger`, `dark`, `info`, `light`, `primary`, `secondary`, `success`, `warning`
Ring UI	Alert	✔️	`error`, `loading`, `message`, `success`, `warning`
Smooth UI	Alert	❌	`danger`, `dark`, `info`, `light`, `primary`, `secondary`, `success`, `warning`
UI Fabric	MessageBar	✔️	`blocked`, `error`, `info`, `remove`, `severeWarning`, `success`, `warning`
Zendesk Garden	Notification	✔️	`error`, `info`, `success`, `warning`

Blueprint, Carbon Design, Elastic UI, Gestalt, Grommet, Onsen UI, Prime React, React Toolbox, react-md, and Semantic UI appear to be missing an Alert component. Please file an issue if one now exists.

Button

Users trigger actions by clicking on buttons.

Criteria

Disabled: A disabled prop exists for use in situations where the user cannot interact with the button.
Groupable: A ButtonGroup component exists in the library, or other such pre-made methods for making button groups.
Icon: An icon can be included either at the left or right of the text, or button can be used with just an icon and no text (notated as only).
Loading: The button has a pre-made loading state for asynchronous events.
Sizes: The button can be easily sized between different (and consistent) major sizes.

Framework	Name	Disabled	Groupable	Icon	Loading	Sizes
Ant Design	Button	✔️	✔️	`left`, `only`, `right`	✔️	`default`, `large`, `small`
Atlaskit	Button	✔️	✔️	`left`, `right`	✔️
Blueprint	Button	✔️	✔️	`left`, `only`, `right`	✔️	`default`, `large`
Carbon Design	Button	✔️	✔️	`only`, `right`	✔️	`default`, `field`, `small`
Chakra UI	Button	✔️	❌	`left`, `only`, `right`	❌	`lg`, `md`, `sm`, `xs`
Elastic UI	Button	✔️	✔️	`left`, `only`, `right`	✔️	`m`, `sm`, `xs`
Element	Button	✔️	✔️	`left`, `only`, `right`	✔️	`default`, `medium`, `mini`, `small`
Elemental UI	Button	❌	✔️		❌	`default`, `extra small`, `large`, `small`
Evergreen	Button	✔️	✔️	`left`, `only`, `right`	✔️	`arbitrary pixel sizes`
Gestalt	Button	✔️	❌	`only`	❌	`lg`, `md`, `sm`
Grommet	Button	✔️	❌	`left`, `only`, `right`	❌
Material UI	Button	✔️	✔️	`left`, `only`, `right`	❌	`large`, `medium`, `small`
Onsen UI	Button	✔️	❌		❌	`default`, `large`
Orbit	Button	✔️	✔️	`left`, `only`, `right`	✔️	`large`, `normal`, `small`
Prime React	Button	❌	❌	`left`, `only`, `right`	❌
Quasar	btn	✔️	✔️	`left`, `only`, `right`	✔️	`custom`, `lg`, `md`, `sm`, `xs`
React Bootstrap	Button	✔️	✔️		❌	`lg`, `sm`
React Toolbox	Button	✔️	❌	`left`, `only`	❌
react-md	Button	✔️	❌	`left`, `only`, `right`	❌
Ring UI	Button	✔️	✔️	`left`, `only`	✔️	`default`, `large`, `small`
Semantic UI	Button	✔️	✔️	`left`, `only`, `right`	✔️	`big`, `huge`, `large`, `massive`, `medium`, `mini`, `small`, `tiny`
Smooth UI	Button	✔️	❌		❌	`base`, `lg`, `sm`, `xl`, `xs`
UI Fabric	Button	✔️	❌		❌
Zendesk Garden	Button	✔️	✔️	`only`	❌	`default`, `large`, `small`

Checkbox

Users toggle between checked, unchecked (or indeterminate) values with checkboxes.

Criteria

Custom Icon: A custom icon can be provided in place of the checkbox itself via a prop or a child.
Disabled: The checkbox has a disabled state, indicating the user cannot interact with it
Indeterminate: The checkbox has an indeterminate state.
Invalid: The checkbox has an invalid or error state.
Label Placement: The text can be positioned at different places around the checkbox.

Framework	Name	Custom Icon	Disabled	Indeterminate	Invalid	Label Placement
Ant Design	Checkbox	❌	✔️	✔️	❌	`right`
Atlaskit	Checkbox	❌	✔️	✔️	✔️	`right`
Blueprint	Checkbox	❌	❌	✔️	❌	`left`, `right`
Carbon Design	Checkbox	❌	✔️	✔️	❌	`right`
Chakra UI	Checkbox	❌	✔️	✔️	✔️	`right`
Elastic UI	Checkbox	❌	✔️	✔️	❌	`right`
Element	Checkbox	❌	✔️	✔️	❌	`right`
Elemental UI	Checkbox	❌	❌	❌	❌	`right`
Evergreen	Checkbox	❌	✔️	✔️	✔️	`right`
Gestalt	Checkbox	❌	✔️	✔️	✔️	`right`
Grommet	CheckBox	❌	✔️	✔️	❌	`right`
Material UI	Checkbox	✔️	✔️	✔️	❌	`above`, `below`, `left`, `right`
Onsen UI	Checkbox	✔️	❌	✔️	✔️	`right`
Orbit	Checkbox	❌	✔️	❌	✔️	`right`
Prime React	Checkbox	❌	✔️	❌	❌	`right`
Quasar	checkbox	❌	✔️	✔️	❌	`left`, `right`
React Bootstrap	Form.Check	❌	✔️	❌	❌
React Toolbox	Checkbox	❌	✔️	❌	❌	`right`
react-md	Checkbox	✔️	✔️	❌	❌	`right`
Ring UI	Checkbox	❌	✔️	❌	❌	`right`
Semantic UI	Checkbox	❌	✔️	✔️	❌	`right`
Smooth UI	Checkbox	❌	✔️	❌	❌	`right`
UI Fabric	Checkbox	❌	✔️	✔️	❌	`left`, `right`
Zendesk Garden	Checkbox	❌	✔️	✔️	❌	`right`

ErrorBoundary

ErrorBoundaries are a React 16+ specific feature that uses the componentDidCatch API for handling uncaught errors without unmounting the whole React component tree.

Criteria

Custom Text: Has a prop or props that can be used to provide a custom title and/or description (as a string, not a ReactNode).
Drop-In JSX Fallback: Has a prop that can be used to provide a custom ReactNode fallback that does not receive the date of componentDidCatch.
Wrapper JSX Fallback: Has a prop that can be used to provide a custom ReactNode for fallback which receives the data of componentDidCatch.

Framework	Name	Custom Text	Drop-In JSX Fallback	Wrapper JSX Fallback
Ant Design	Alert.ErrorBoundary	✔️	❌	❌
Carbon Design	ErrorBoundary	❌	✔️	❌
Elastic UI	ErrorBoundary	❌	❌	❌

Atlaskit, Blueprint, Chakra UI, Element, Elemental UI, Evergreen, Gestalt, Grommet, Material UI, Onsen UI, Orbit, Prime React, Quasar, React Bootstrap, React Toolbox, react-md, Ring UI, Semantic UI, Smooth UI, UI Fabric, and Zendesk Garden appear to be missing an ErrorBoundary component. Please file an issue if one now exists.

Stepper

Navigation that guides users through the steps of a task.

Criteria

Can Be Vertical: The steps can be stacked vertically.
Clickable: A user can click on the step itself to navigate.
Step Description: A step can have a subtext with a description.
Step Error: A step with an error can be easily identified to the user.
Step Icon: The steps have a prop whereby they can be given custom icons.

Framework	Name	Can Be Vertical	Clickable	Step Description	Step Error	Step Icon
Ant Design	Steps	✔️	✔️	✔️	✔️	✔️
Atlaskit	ProgressTracker	❌	✔️	❌	❌	❌
Carbon Design	ProgressIndicator	✔️	✔️	✔️	✔️	❌
Elastic UI	Steps	✔️	❌	❌	❌	❌
Element	Steps	✔️	❌	✔️	✔️	✔️
Material UI	Stepper	✔️	✔️	✔️	✔️	✔️
Prime React	Steps	❌	✔️	❌	❌	❌
Quasar	Stepper	✔️	✔️	✔️	✔️	✔️
Semantic UI	Steps	✔️	✔️	✔️	❌	✔️
Zendesk Garden	Stepper	❌	❌	❌	❌	❌

Blueprint, Chakra UI, Elemental UI, Evergreen, Gestalt, Grommet, Onsen UI, Orbit, React Bootstrap, React Toolbox, react-md, Ring UI, Smooth UI, and UI Fabric appear to be missing a Stepper component. Please file an issue if one now exists.

Switch

Used to toggle between two states: on and off.

Criteria

Disabled: The switch has a disabled state, indicating that the user cannot interact with it.
Indeterminate: The switch has an ability to display an indeterminate state.
Internal Icons: The switch has a prop (or child) to include custom icons within the space of the switch (e.g. a checkmark and an x icon).
Internal Text: The switch has a prop (or child) to include custom text within the space of the switch (e.g. the text on and off).
Lable Placement: Where a label can be attached to the switch.
Loading: The switch has a loading state that indicates a pending state of a switch action.
Sizes: The lable has native, pre-configured size options.

Framework	Name	Disabled	Indeterminate	Internal Icons	Internal Text	Lable Placement	Loading	Sizes
Ant Design	Switch	✔️	❌	✔️	✔️		✔️	`default`, `small`
Atlaskit	Toggle	✔️	❌	❌	❌		❌	`large`, `regular`
Blueprint	Switch	✔️	❌	❌	✔️	`left`, `right`	❌	`default`, `large`
Carbon Design	Switch	✔️	❌	❌	❌	`right`	❌	`default`, `small`
Chakra UI	Switch	✔️	❌	❌	❌	`left`, `right`	❌	`lg`, `md`, `sm`
Elastic UI	Switch	✔️	❌	❌	❌	`right`	❌	`compressed`, `default`
Element	Switch	✔️	❌	❌	❌	`left`, `right`	❌
Evergreen	Switch	✔️	❌	❌	❌		❌	`integers`
Gestalt	Switch	✔️	❌	❌	❌		❌
Grommet	CheckBox	✔️	❌	❌	❌	`left`, `right`	❌
Material UI	Switch	✔️	❌	❌	❌	`above`, `below`, `left`, `right`	❌	`default`, `small`
Onsen UI	Switch	✔️	❌	❌	❌		❌
Prime React	InputSwitch	✔️	❌	❌	❌		❌
Quasar	toggle	✔️	❌	✔️	❌	`left`, `right`	❌	`custom`, `lg`, `md`, `sm`, `xl`, `xs`
React Bootstrap	Form.Check	✔️	❌	❌	❌	`right`	❌
React Toolbox	Switch	✔️	❌	❌	❌	`right`	❌
Ring UI	Toggle	✔️	❌	❌	❌	`left`, `right`	❌
Smooth UI	Switch	✔️	❌	❌	✔️		❌	`base`, `lg`, `sm`, `xl`, `xs`
UI Fabric	Toggle	✔️	❌	❌	❌	`left`, `right`	❌
Zendesk Garden	Toggle	❌	❌	❌	❌	`above`, `below`	❌

Elemental UI, Orbit, react-md, and Semantic UI appear to be missing a Switch component. Please file an issue if one now exists.

Tabs

Users switch between different views with tabs.

Criteria

Can Be Vertical: The tabs can be stacked vertically.

Framework	Name	Can Be Vertical
Ant Design	Tabs	✔️
Atlaskit	Tabs	❌
Blueprint	Tabs	✔️
Carbon Design	Tabs	❌
Chakra UI	Tabs	✔️
Elastic UI	Tabs	❌
Element	Tabs	✔️
Evergreen	Tablist	✔️
Gestalt	Tabs	❌
Grommet	Tabs	❌
Material UI	Tabs	✔️
Onsen UI	Tabbar	❌
Prime React	TabView	❌
Quasar	tabs	✔️
React Bootstrap	Tabs	❌
React Toolbox	Tabs	❌
react-md	Tabs	❌
Ring UI	Tabs	❌
Semantic UI	Tabs	❌
UI Fabric	Pivot	❌
Zendesk Garden	Tabs	✔️

Elemental UI, Orbit, and Smooth UI appear to be missing a Tabs component. Please file an issue if one now exists.

How to Make a Change

The README.md and website are both autogenerated from the same source input files. For convenience, there is exactly one file for each project that has all the information for that project, located in the frameworks directory. To update any given data point, simply make a change to one of those files and run yarn generate.

Download Details:

Author: dimitropoulos

Demo: https://react-ui-roundup.dimitrimitropoulos.com/

Source Code: https://github.com/dimitropoulos/react-ui-roundup

#reactjs #react #javascript