Awesome Open Source
Awesome Open Source

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!

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 5,611 27,416 617 MIT
Atlaskit atlassian.design bitbucket.org/atlassian/atlaskit-mk-2 -- -- -- --
Blueprint blueprintjs.com palantir/blueprint 17,574 1,840 555 Apache 2.0
Carbon Design react.carbondesignsystem.com carbon-design-system/carbon 4,157 950 436 Apache 2.0
Chakra UI chakra-ui.com chakra-ui/chakra-ui 16,807 1,327 75 MIT
Elastic UI elastic.github.io/eui elastic/eui 2,686 482 352 Apache 2.0
Element element.eleme.io ElemeFE/element 49,724 12,508 1,848 MIT
Elemental UI elemental-ui.com elementalui/elemental 4,322 242 49 MIT
Evergreen evergreen.segment.com segmentio/evergreen 10,619 640 77 MIT
Gestalt gestalt.netlify.app pinterest/gestalt 3,761 290 12 Apache 2.0
Grommet v2.grommet.io grommet/grommet 7,157 870 210 Apache 2.0
Material UI material-ui.com mui-org/material-ui 67,410 21,338 501 MIT
Onsen UI onsen.io OnsenUI/OnsenUI 8,304 954 154 Apache 2.0
Orbit orbit.kiwi kiwicom/orbit 786 84 41 MIT
Prime React primefaces.org/primereact primefaces/primereact 1,944 425 176 MIT
Quasar quasar.dev quasarframework/quasar 18,208 2,162 336 MIT
React Bootstrap react-bootstrap.github.io react-bootstrap/react-bootstrap 19,229 3,076 141 MIT
React Toolbox react-toolbox.io react-toolbox/react-toolbox 8,684 1,044 264 MIT
react-md react-md.mlaursen.com mlaursen/react-md 2,221 309 47 MIT
Ring UI jetbrains.github.io/ring-ui JetBrains/ring-ui 2,624 138 8 Apache 2.0
Semantic UI semantic-ui.com Semantic-Org/Semantic-UI 49,148 5,114 1,044 MIT
Smooth UI smooth-code.com/open-source/smooth-ui smooth-code/smooth-ui 1,566 114 12 MIT
UI Fabric developer.microsoft.com/en-us/fluentui microsoft/fluentui 11,205 1,888 1,283 Other
Zendesk Garden garden.zendesk.com zendeskgarden/react-components 861 63 1 Apache 2.0

all of the above statistics were last updated Fri, 09 Apr 2021 15:56:32 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 ✔️ 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 ✔️
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.

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
Material UI 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
UI Fabric Persona ✔️ circle, rounded-square number icon, image, text
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

  • 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 Expandable Group Max Count
Ant Design Avatar.Group ✔️ ✔️
Atlaskit AvatarGroup ✔️ ✔️
Chakra UI AvatarGroup ✔️
Material UI AvatarGroup ✔️
UI Fabric Facepile ✔️ ✔️

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
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

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 ✔️ ✔️ ✔️
Gestalt DatePicker ✔️ ✔️ day ✔️
Grommet DateInput day
Material UI DatePicker day ✔️
Quasar DatePicker ✔️ day, month, year ✔️ ✔️
React Toolbox DatePicker ✔️ ✔️ day, month, year
Ring UI DatePicker ✔️ ✔️ day, month, year ✔️ ✔️
UI Fabric 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, 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.


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
typescript (11,661
react (5,475
reactjs (1,104
material-design (662
material-ui (228
antd (135
ant-design (111
semantic-ui (39
blueprint (29
chakra-ui (17