dimitropoulos / react-ui-roundup

A one-stop-shop for comparing the features of all the best React frameworks. Useful for designers and engineers alike!

React UI Roundup

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

• About
• Framework Statistics
• Framework Features
• Components
  • Alert
  • AppBar
  • Avatar
  • AvatarGroup
  • Button
  • Checkbox
  • DatePicker
  • ErrorBoundary
  • Pagination
  • Select
  • Stepper
  • Switch
  • Tabs

About

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	82,199	36,207	929	MIT
Atlaskit	atlassian.design	bitbucket.org/atlassian/atlaskit-mk-2	--	--	--	--
Blueprint	blueprintjs.com	palantir/blueprint	19,338	2,062	669	Apache 2.0
Carbon Design	react.carbondesignsystem.com	carbon-design-system/carbon	5,973	1,405	541	Apache 2.0
Chakra UI	chakra-ui.com/docs	chakra-ui/chakra-ui	28,998	2,589	84	MIT
Elastic UI	elastic.github.io/eui	elastic/eui	5,350	714	354	Other
Element	element.eleme.io	ElemeFE/element	52,726	14,246	2,301	MIT
Elemental UI	elemental-ui.com	elementalui/elemental	4,322	242	49	MIT
Evergreen	evergreen.segment.com	segmentio/evergreen	11,821	817	45	MIT
Fluent UI	developer.microsoft.com/en-us/fluentui	microsoft/fluentui	14,113	2,316	675	Other
Gestalt	gestalt.netlify.app	pinterest/gestalt	4,023	321	15	Apache 2.0
Grommet	v2.grommet.io	grommet/grommet	8,048	982	198	Apache 2.0
MUI	mui.com/material-ui/	mui/material-ui	81,915	28,229	1,278	MIT
Onsen UI	onsen.io	OnsenUI/OnsenUI	8,641	1,024	104	--
Orbit	orbit.kiwi	kiwicom/orbit	1,254	128	26	MIT
Prime React	primefaces.org/primereact	primefaces/primereact	3,190	647	200	MIT
Quasar	quasar.dev	quasarframework/quasar	22,121	2,979	448	MIT
React Bootstrap	react-bootstrap.github.io	react-bootstrap/react-bootstrap	21,160	3,417	164	MIT
React Toolbox	react-toolbox.io	react-toolbox/react-toolbox	8,700	1,040	268	MIT
react-md	react-md.dev	mlaursen/react-md	2,322	316	52	MIT
Ring UI	jetbrains.github.io/ring-ui/master/index.html?path=/docs	JetBrains/ring-ui	3,293	191	7	Apache 2.0
Semantic UI	semantic-ui.com	Semantic-Org/Semantic-UI	50,195	5,108	1,059	MIT
Smooth UI	smooth-code.com/open-source/smooth-ui	smooth-code/smooth-ui	1,603	114	10	MIT
Zendesk Garden	garden.zendesk.com	zendeskgarden/react-components	1,030	86	15	Apache 2.0

all of the above statistics were last updated Wed, 12 Oct 2022 18:16:19 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	❌	❌	❌
Fluent UI	✔️	Figma, Sketch	❌	❌	✔️
Gestalt	❌	❌	✔️	❌	❌
Grommet	❌	Custom, Framer X, Sketch	✔️	Link	✔️
MUI	✔️	Adobe XD, 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	✔️	❌	❌	❌	❌
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
Fluent UI	MessageBar	✔️	blocked, error, info, remove, severeWarning, success, warning
MUI	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
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.

AppBar

The AppBar displays information and actions relating to the current screen.

Criteria

• API: The API style used for the components contained within the AppBar.
• Dense: There is a built-in way to make the bar take up less vertical space.
• Sticky: A prop exists which can set the bar into a mode where it remains at the top of the screen, independent of scroll depth.
• Theme Mode: The bar can be individually themed to use a theme mode that doesn't match the rest of the app. E.g. dark mode AppBar in a light mode app.

Framework	Name	API	Dense	Sticky	Theme Mode
Elastic UI	Header	customComponents	❌	✔️	✔️
MUI	AppBar	children	✔️	✔️	✔️
React Toolbox	AppBar	props	❌	✔️	❌
react-md	AppBar	customComponents	✔️	❌	✔️
Ring UI	Header	children	✔️	❌	✔️
Zendesk Garden	Header	customComponents	✔️	❌	✔️

Ant Design, Atlaskit, Blueprint, Carbon Design, Chakra UI, Element, Elemental UI, Evergreen, Fluent UI, Gestalt, Grommet, Onsen UI, Orbit, Prime React, Quasar, React Bootstrap, Semantic UI, and Smooth UI appear to be missing an AppBar component. Please file an issue if one now exists.

Avatar

Avatars can be used to represent people or objects.

Criteria

• Badge: A custom badge or status is available or easily configurable.
• Shapes: Avatars can be easily formed into different styles using a prop or similar mechanism (not custom CSS).
• Sizes: Avatars can be easily sized between different (and consistent) major sizes.
• Types: Avatars can be presented to users as icons (i.e. generic fallback illustrations), custom images, or can contain text.

Framework	Name	Badge	Shapes	Sizes	Types
Ant Design	Avatar	✔️	circle, square	default, large, number, small	icon, image, text
Atlaskit	Avatar	❌	circle, square	large, medium, small, xlarge, xsmall, xxlarge	icon, image
Chakra UI	Avatar	✔️	circle	2xl, 2xs, lg, md, sm, xl, xs
Element	Avatar	❌	circle, square	large, medium, number, small	image, image, text
Evergreen	Avatar	❌	circle	number	image, text
Fluent UI	Persona	✔️	circle, rounded-square	number	icon, image, text
MUI	Avatar	✔️	circle, rounded-square, square	number	icon, image, text
Quasar	avatar	✔️	circle, rounded-square, square	lg, md, number, sm, xl, xs	icon, image, text
Ring UI	Avatar	❌	circle, rounded-square	18, 20, 24, 32, 40, 48, 56, number	image
Zendesk Garden	Avatar	✔️	circle, rounded-square	extraextrasmall, extrasmall, large, medium, small	icon, image, text

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

AvatarGroup

AvatarGroups stack a set of Avatars into a customized list, often with customized animations and options.

Criteria

• Cascade Direction: A prop exists that allows you to set whether the children overlap above or below each other.
• Expandable Group: Avatar groups support expandable lists where a user can click to see more members in the list.
• Max Count: A custom number can be set representing the number of avatars shown.

Framework	Name	Cascade Direction	Expandable Group	Max Count
Ant Design	Avatar.Group	above	✔️	✔️
Atlaskit	AvatarGroup	below	✔️	✔️
Chakra UI	AvatarGroup	below	❌	✔️
Fluent UI	Facepile	no-overlap	✔️	✔️
MUI	AvatarGroup	below	❌	✔️

Blueprint, Carbon Design, Elastic UI, Element, Elemental UI, Evergreen, Gestalt, Grommet, Onsen UI, Orbit, Prime React, Quasar, React Bootstrap, React Toolbox, react-md, Ring UI, Semantic UI, Smooth UI, and Zendesk Garden appear to be missing an AvatarGroup 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
Fluent UI	Button	✔️	❌		❌
Gestalt	Button	✔️	❌	only	❌	lg, md, sm
Grommet	Button	✔️	❌	left, only, right	❌
MUI	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
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
Fluent UI	Checkbox	❌	✔️	✔️	❌	left, right
Gestalt	Checkbox	❌	✔️	✔️	✔️	right
Grommet	CheckBox	❌	✔️	✔️	❌	right
MUI	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
Zendesk Garden	Checkbox	❌	✔️	✔️	❌	right

DatePicker

Users select a date or date range using a date picker.

Criteria

• Clearable: Has a prop that allows the user to easily clear the date selection.
• Custom Locale: A developer can specify a custom locale with a prop.
• Min/Max: Allows a devloper to easily set a minimum and maximum date.
• Modes: Allows users to quickly select from different magnituteds of lengths of time.
• Presets: A super simple way exists to provide the user with preset dates (e.g. "Today", "Last Week", , "Past 3 years").
• Range: An out-of-the-box solution exists for allowing the user to select date ranges.
• Time: Users are able to input times.

Framework	Name	Clearable	Custom Locale	Min/Max	Modes	Presets	Range	Time
Ant Design	DatePicker	✔️	✔️	❌	day, month, quarter, week, year	✔️	✔️	✔️
Blueprint	DatePicker	❌	✔️	✔️	day, month, year	✔️	✔️	✔️
Carbon Design	DatePicker	❌	❌	✔️	day, year	❌	✔️	✔️
Elastic UI	DatePicker	✔️	✔️	✔️	day	❌	✔️	✔️
Element	DatePicker	✔️	❌	✔️	day, month, week, year	✔️	✔️	✔️
Fluent UI	DatePicker	❌	❌	✔️	day, month, year	❌	✔️	❌
Gestalt	DatePicker	❌	✔️	✔️	day	❌	✔️	❌
Grommet	DateInput	❌	❌	❌	day	❌	❌	❌
MUI	DatePicker	❌	❌	❌	day	❌	❌	✔️
Quasar	date	❌	❌	✔️	day, month, year	❌	✔️	✔️
React Toolbox	DatePicker	❌	✔️	✔️	day, month, year	❌	❌	❌
Ring UI	DatePicker	✔️	❌	✔️	day, month, year	❌	✔️	✔️
Zendesk Garden	DatePicker	❌	✔️	✔️	day	❌	✔️	❌

Atlaskit, Chakra UI, Elemental UI, Evergreen, Onsen UI, Orbit, Prime React, React Bootstrap, react-md, Semantic UI, and Smooth UI appear to be missing a DatePicker component. Please file an issue if one now exists.

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, Fluent UI, Gestalt, Grommet, MUI, Onsen UI, Orbit, Prime React, Quasar, React Bootstrap, React Toolbox, react-md, Ring UI, Semantic UI, Smooth UI, and Zendesk Garden appear to be missing an ErrorBoundary component. Please file an issue if one now exists.

Pagination

Pagination allows long lists to be divided into several pages.

Criteria

• Compact: Has a mode that greatly conserves horizontal space, likely by omitting multiple page selectors.
• Edge #: Allows configuring the number of items that will be shown at the beginning and end of the range.
• First/Last: Has ready-made functionality to allow users to quickly select first and last pages (either with a stationary page number or a dedicated button).
• # of Pages: Allows the number of page items shown to be configurable.
• Page Size: Allows configuring the number of items that will be shown per page.
• Style: Has an API the is oriented around pages (but disregards pages) or items (and figures out pages automatically).

Framework	Name	# of Pages	Compact	Edge #	First/Last	Page Size	Style
Ant Design	Pagination	✔️	✔️	❌	❌	✔️	items
Atlaskit	Pagination	✔️	❌	❌	❌	❌	pages
Carbon Design	PaginationNav	✔️	❌	❌	❌	✔️	items
Elastic UI	Pagination	❌	✔️	❌	✔️	❌	pages
Element	Pagination	✔️	✔️	❌	❌	✔️	items
Evergreen	Pagination	❌	✔️	❌	❌	❌	pages
Grommet	Pagination	✔️	✔️	✔️	✔️	✔️	items
MUI	Pagination	❌	✔️	✔️	✔️	❌	pages
Orbit	Pagination	✔️	✔️	❌	❌	❌	pages
Prime React	Paginator	✔️	✔️	❌	✔️	✔️	items, pages
Quasar	pagination	✔️	✔️	❌	✔️	❌	pages
React Bootstrap	Pagination	❌	✔️	❌	✔️	❌	pages
Ring UI	Pager	✔️	❌	❌	✔️	✔️	pages
Zendesk Garden	Pagination	✔️	✔️	✔️	✔️	❌	pages

Blueprint, Chakra UI, Elemental UI, Fluent UI, Gestalt, Onsen UI, React Toolbox, react-md, Semantic UI, and Smooth UI appear to be missing a Pagination component. Please file an issue if one now exists.

Select

A Select allows a user to select a value from a series of options. Much more advanced than the native HTML select.

Criteria

• Async: Has support fo async-loaded lists (for example, a loading state).
• Disabled: The whole select be disabled with a built-in prop.
• Disabled Options: Individual options can be easily disabled with a prop.
• Filterable: Filter the options of the select with keyboard input.
• Groupable: Can group the options into sub sections within the options list.
• Icons: Has out-of-the-box (i.e. props) support for start or end icons (or can easily be composed with icons and has examples of such on the docs).
• Virtual: Either had a prop that you can use to make the items virtualized, or proveds a simple (documented) way to use another library to do it, e.g. react-virtualized.

Framework	Name	Async	Disabled	Disabled Options	Filterable	Groupable	Icons	Virtual
Ant Design	Select	✔️	✔️	✔️	✔️	✔️	end	✔️
Atlaskit	Select	✔️	✔️	❌	✔️	✔️		❌
Blueprint	Select	✔️	✔️	✔️	✔️	✔️		✔️
Carbon Design	Select	❌	✔️	✔️	❌	✔️		❌
Chakra UI	Select	❌	✔️	✔️	❌	❌		❌
Elastic UI	SuperSelect	✔️	❌	✔️	❌	❌	composable	❌
Element	Select	✔️	✔️	✔️	✔️	✔️		❌
Elemental UI	Dropdown	❌	❌	❌	❌	✔️		❌
Evergreen	SelectMenu	✔️	✔️	✔️	✔️	✔️	start	✔️
Fluent UI	Dropdown	❌	✔️	✔️	✔️	✔️	composable	❌
Gestalt	SelectList	❌	✔️	✔️	❌	❌		❌
Grommet	Select	❌	✔️	✔️	❌	❌		❌
MUI	Select	✔️	✔️	✔️	❌	✔️	composable	❌
Onsen UI	Select	❌	✔️	✔️	❌	❌		❌
Orbit	Select	❌	✔️	✔️	❌	❌	end, start	❌
Prime React	Dropdown	✔️	✔️	✔️	✔️	✔️	composable	✔️
Quasar	select	✔️	✔️	✔️	✔️	❌		✔️
React Bootstrap	Dropdown	❌	✔️	✔️	✔️	✔️		❌
React Toolbox	Dropdown	❌	✔️	✔️	❌	❌		❌
react-md	Dropdown	❌	❌	❌	❌	❌	end, start	✔️
Ring UI	Select	✔️	✔️	✔️	✔️	❌		❌
Semantic UI	Dropdown	✔️	✔️	✔️	✔️	❌	composable	❌
Smooth UI	Select	❌	✔️	✔️	❌	❌		❌
Zendesk Garden	Select	❌	✔️	✔️	❌	❌	start	❌

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	✔️	❌	✔️	✔️	✔️
MUI	Stepper	✔️	✔️	✔️	✔️	✔️
Prime React	Steps	❌	✔️	❌	❌	❌
Quasar	stepper	✔️	✔️	✔️	✔️	✔️
Semantic UI	Steps	✔️	✔️	✔️	❌	✔️
Zendesk Garden	Stepper	❌	❌	❌	❌	❌

Blueprint, Chakra UI, Elemental UI, Evergreen, Fluent UI, Gestalt, Grommet, Onsen UI, Orbit, React Bootstrap, React Toolbox, react-md, Ring UI, and Smooth UI 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
Fluent UI	Toggle	✔️	❌	❌	❌	left, right	❌
Gestalt	Switch	✔️	❌	❌	❌		❌
Grommet	CheckBox	✔️	❌	❌	❌	left, right	❌
MUI	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
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	✔️
Fluent UI	Pivot	❌
Gestalt	Tabs	❌
Grommet	Tabs	❌
MUI	Tabs	✔️
Onsen UI	Tabbar	❌
Prime React	TabView	❌
Quasar	tabs	✔️
React Bootstrap	Tabs	❌
React Toolbox	Tabs	❌
react-md	Tabs	❌
Ring UI	Tabs	❌
Semantic UI	Tabs	❌
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.

react-ui-roundup's Issues

Notify all libraries that they are tracked here

Hi, library author! Thanks for taking a look at this project!

I take a lot of pride in my work, and I bet you do too. If someone had a project (like this one) tracking/comparing the capabilities of a project of mine I imagine I would like to know about it. Therefore, I thought it only best to at least notify you that your project is being tracked here.

I've done my absolute best to attend to every detail and represent things accurately and fairly, but with so many data points I'm bound to make a few mistakes. If you'd like to take a look at the information housed in this repo about your framework, you'll find it in a file in the frameworks directory, for example: here's antd's. All information about your project, from the website to the main README, is autogenerated from this one file alone.

If you would like your project to be removed, please just let me know and I will be happy to do so - no questions asked 😄.

Finally, thanks for open-sourcing your work! It makes the world a better place and it has made me better at what I love to do.

---

• Ant Design: ant-design/ant-design#21696
• Atlaskit: (need to figure out how on bitbucket..)
• Blueprint: palantir/blueprint#3992
• Carbon Design: carbon-design-system/carbon#5494
• Chakra UI: chakra-ui/chakra-ui#461
• Elastic UI: elastic/eui#2951
• Element: ElemeFE/element#18875
• Elemental UI: elementalui/elemental#230
• Evergreen: segmentio/evergreen#750
• Gestalt: https://github.com/pinterest/gestalt/issues/708
• Material UI: mui/material-ui#19891
• Onsen UI: OnsenUI/OnsenUI#2728
• Orbit: kiwicom/orbit#1578
• Prime React: primefaces/primereact#1210
• React Bootstrap: react-bootstrap/react-bootstrap#5018
• React Toolbox: react-toolbox/react-toolbox#1939
• Ring UI: (I'm assuming this is on YouTrack somewhere?)
• Semantic UI: Semantic-Org/Semantic-UI#6960
• Smooth UI: smooth-code/smooth-ui#168
• UI Fabric: microsoft/fluentui#12132
• Zendesk Garden: zendeskgarden/react-components#656
• grommet: grommet/grommet#3804
• react-md: mlaursen/react-md#868
• quasar: quasarframework/quasar#7372

Framework Name sorting should be case insensitive

see: grommet/grommet#3804 (comment)

[Add] Shopify

https://polaris.shopify.com/components/actions/button

[Add] Base Web

https://baseweb.design/components

[Add] Shards React

https://designrevision.com/docs/shards-react/

[Add] Quasar

https://quasar.dev/vue-components/timeline

Vue project, yes... but it's useful for all the same reasons and also a really really good looking project.

[Add] Lightning Design System

https://react.lightningdesignsystem.com/components

Grommet switch

Grommit does not have a component called Switch but using CheckBox with the toggle prop is visually presented as a switch, e.g.
<CheckBox toggle>

[Add] RSuite JS

https://rsuitejs.com

[Add] Reach-UI

It'd be cool to see how Reach-UI compares to these other frameworks, being that it's a more minimal "scaffold" for building your own design system, rather than a complete one out of the box: https://reacttraining.com/reach-ui/

[Add] PatternFly

https://patternfly-react.surge.sh/

https://github.com/patternfly/patternfly-react

As first seen in Openshift Container Platform

[Select] - add virtualization Criteria to the select

virtualization support is a key feature, when having dropdown lists with multiple options. adding this criteria can be really helpful.

[Replace] Semantic-UI with Formantic-UI?

apparently Semantic-UI is no more, and Formantic-UI is the replacement.

Semantic-Org/Semantic-UI#6945

test with Parcel 2 prerelease

see: parcel-bundler/parcel#3377

This could solve some of the issues with unpredictable row density seen in Parcel v1 + Material UI.

There is a stepper component in Orbit

There is a stepper component in Kiwi's Orbit design system. It's called "Wizard".
Link: https://orbit.kiwi/components/progress-indicators/wizard/