Need help with react-ui-roundup?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

dimitropoulos
220 Stars 9 Forks 57 Commits 11 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

# 13,662
csv-par...
sublime...
Google ...
ace
46 commits
# 27,080
React N...
openvpn
React
js
2 commits
# 31,660
JavaScr...
HTML
React
a11y
1 commit
# 75,162
chromiu...
actix-w...
lisp-in...
Lisp
1 commit

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

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 | 73,706 | 29,592 | 699 | MIT | | Atlaskit | atlassian.design | bitbucket.org/atlassian/atlaskit-mk-2 | -- | -- | -- | -- | | Blueprint | blueprintjs.com | palantir/blueprint | 18,042 | 1,899 | 622 | Apache 2.0 | | Carbon Design | react.carbondesignsystem.com | carbon-design-system/carbon | 4,530 | 1,076 | 458 | Apache 2.0 | | Chakra UI | chakra-ui.com | chakra-ui/chakra-ui | 19,845 | 1,632 | 128 | MIT | | Elastic UI | elastic.github.io/eui | elastic/eui | 2,970 | 538 | 388 | Other | | Element | element.eleme.io | ElemeFE/element | 50,628 | 13,016 | 1,875 | MIT | | Elemental UI | elemental-ui.com | elementalui/elemental | 4,325 | 243 | 49 | MIT | | Evergreen | evergreen.segment.com | segmentio/evergreen | 10,972 | 689 | 30 | MIT | | Fluent UI | developer.microsoft.com/en-us/fluentui | microsoft/fluentui | 11,882 | 1,959 | 973 | Other | | Gestalt | gestalt.netlify.app | pinterest/gestalt | 3,860 | 298 | 12 | Apache 2.0 | | Grommet | v2.grommet.io | grommet/grommet | 7,416 | 907 | 227 | Apache 2.0 | | Material UI | material-ui.com | mui-org/material-ui | 70,233 | 23,375 | 558 | MIT | | Onsen UI | onsen.io | OnsenUI/OnsenUI | 8,429 | 979 | 165 | Apache 2.0 | | Orbit | orbit.kiwi | kiwicom/orbit | 1,043 | 99 | 43 | MIT | | Prime React | primefaces.org/primereact | primefaces/primereact | 2,161 | 474 | 214 | MIT | | Quasar | quasar.dev | quasarframework/quasar | 19,179 | 2,353 | 423 | MIT | | React Bootstrap | react-bootstrap.github.io | react-bootstrap/react-bootstrap | 19,763 | 3,137 | 137 | MIT | | React Toolbox | react-toolbox.io | react-toolbox/react-toolbox | 8,704 | 1,042 | 264 | MIT | | react-md | react-md.dev | mlaursen/react-md | 2,254 | 309 | 47 | MIT | | Ring UI | jetbrains.github.io/ring-ui | JetBrains/ring-ui | 2,694 | 148 | 4 | Apache 2.0 | | Semantic UI | semantic-ui.com | Semantic-Org/Semantic-UI | 49,478 | 5,136 | 1,049 | MIT | | Smooth UI | smooth-code.com/open-source/smooth-ui | smooth-code/smooth-ui | 1,576 | 116 | 12 | MIT | | Zendesk Garden | garden.zendesk.com | zendeskgarden/react-components | 910 | 72 | 5 | Apache 2.0 |

all of the above statistics were last updated Wed, 11 Aug 2021 17:50:17 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 | :heavycheckmark: | Figma, Sketch | :heavycheckmark: | Link | :heavycheckmark: | | Atlaskit | :x: | Sketch | :x: | :x: | :x: | | Blueprint | :heavycheckmark: | Sketch | :heavycheckmark: | :x: | :heavycheckmark: | | Carbon Design | :heavycheckmark: | Sketch | :heavycheckmark: | Link | :x: | | Chakra UI | :heavycheckmark: | :x: | :heavycheckmark: | :x: | :heavycheckmark: | | Elastic UI | :heavycheckmark: | Sketch | :x: | :x: | :heavycheckmark: | | Element | :x: | Axure, Sketch | :x: | Link | :x: | | Elemental UI | :x: | :x: | :x: | :x: | :x: | | Evergreen | :x: | Sketch | :x: | :x: | :x: | | Fluent UI | :heavycheckmark: | Figma, Sketch | :x: | :x: | :heavycheckmark: | | Gestalt | :x: | :x: | :heavycheckmark: | :x: | :x: | | Grommet | :x: | Custom, Framer X, Sketch | :heavycheckmark: | Link | :heavycheckmark: | | Material UI | :heavycheckmark: | Adobe XD, Figma, Sketch | :heavycheckmark: | Link | :heavycheckmark: | | Onsen UI | :heavycheckmark: | :x: | :x: | :x: | :heavycheckmark: | | Orbit | :x: | Abstract, Sketch | :heavycheckmark: | Link | :x: | | Prime React | :heavycheckmark: | :x: | :x: | :x: | :x: | | Quasar | :heavycheckmark: | :x: | :heavycheckmark: | Link | :heavycheckmark: | | React Bootstrap | :x: | :x: | :x: | :x: | :heavycheckmark: | | React Toolbox | :x: | :x: | :x: | :x: | :heavycheckmark: | | react-md | :heavycheckmark: | :x: | :x: | :x: | :heavycheckmark: | | Ring UI | :x: | :x: | :x: | :x: | :x: | | Semantic UI | :x: | Sketch | :heavycheckmark: | :x: | :x: | | Smooth UI | :heavycheckmark: | :x: | :x: | :x: | :x: | | Zendesk Garden | :x: | :x: | :heavycheckmark: | :x: | :heavycheckmark: |

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

error
,
info
,
success
,
warning
| | Atlaskit | SectionMessage | :x: |
change
,
confirmation
,
error
,
info
,
warning
| | Atlaskit | Flag | :x: |
change
,
confirmation
,
error
,
info
,
warning
| | Chakra UI | Alert | :heavycheckmark: |
error
,
info
,
success
,
warning
| | Element | Alert | :heavycheckmark: |
error
,
info
,
success
,
warning
| | Elemental UI | Alert | :x: |
danger
,
info
,
primary
,
success
,
warning
| | Evergreen | Alert | :heavycheckmark: |
danger
,
none
,
success
,
warning
| | Fluent UI | MessageBar | :heavycheckmark: |
blocked
,
error
,
info
,
remove
,
severeWarning
,
success
,
warning
| | Material UI | Alert | :heavycheckmark: |
error
,
info
,
success
,
warning
| | Orbit | Alert | :heavycheckmark: |
critical
,
info
,
success
,
warning
| | Quasar | banner | :x: | | | React Bootstrap | Alert | :heavycheckmark: |
danger
,
dark
,
info
,
light
,
primary
,
secondary
,
success
,
warning
| | Ring UI | Alert | :heavycheckmark: |
error
,
loading
,
message
,
success
,
warning
| | Smooth UI | Alert | :x: |
danger
,
dark
,
info
,
light
,
primary
,
secondary
,
success
,
warning
| | Zendesk Garden | Notification | :heavycheckmark: |
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 | :heavycheckmark: |

circle
,
square
|
default
,
large
,
number
,
small
|
icon
,
image
,
text
| | Atlaskit | Avatar | :x: |
circle
,
square
|
large
,
medium
,
small
,
xlarge
,
xsmall
,
xxlarge
|
icon
,
image
| | Chakra UI | Avatar | :heavycheckmark: |
circle
|
2xl
,
2xs
,
lg
,
md
,
sm
,
xl
,
xs
| | | Element | Avatar | :x: |
circle
,
square
|
large
,
medium
,
number
,
small
|
image
,
image
,
text
| | Evergreen | Avatar | :x: |
circle
|
number
|
image
,
text
| | Fluent UI | Persona | :heavycheckmark: |
circle
,
rounded-square
|
number
|
icon
,
image
,
text
| | Material UI | Avatar | :heavycheckmark: |
circle
,
rounded-square
,
square
|
number
|
icon
,
image
,
text
| | Quasar | Avatar | :heavycheckmark: |
circle
,
rounded-square
,
square
|
lg
,
md
,
number
,
sm
,
xl
,
xs
|
icon
,
image
,
text
| | Ring UI | Avatar | :x: |
circle
,
rounded-square
|
18
,
20
,
24
,
32
,
40
,
48
,
56
,
number
|
image
| | Zendesk Garden | Avatar | :heavycheckmark: |
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 | :heavycheckmark: | :heavycheckmark: | | Atlaskit | AvatarGroup | :heavycheckmark: | :heavycheckmark: | | Chakra UI | AvatarGroup | :x: | :heavycheckmark: | | Fluent UI | Facepile | :heavycheckmark: | :heavycheckmark: | | Material UI | AvatarGroup | :x: | :heavycheckmark: |

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

left
,
only
,
right
| :heavycheckmark: |
default
,
large
,
small
| | Atlaskit | Button | :heavycheckmark: | :heavycheckmark: |
left
,
right
| :heavycheckmark: | | | Blueprint | Button | :heavycheckmark: | :heavycheckmark: |
left
,
only
,
right
| :heavycheckmark: |
default
,
large
| | Carbon Design | Button | :heavycheckmark: | :heavycheckmark: |
only
,
right
| :heavycheckmark: |
default
,
field
,
small
| | Chakra UI | Button | :heavycheckmark: | :x: |
left
,
only
,
right
| :x: |
lg
,
md
,
sm
,
xs
| | Elastic UI | Button | :heavycheckmark: | :heavycheckmark: |
left
,
only
,
right
| :heavycheckmark: |
m
,
sm
,
xs
| | Element | Button | :heavycheckmark: | :heavycheckmark: |
left
,
only
,
right
| :heavycheckmark: |
default
,
medium
,
mini
,
small
| | Elemental UI | Button | :x: | :heavycheckmark: | | :x: |
default
,
extra small
,
large
,
small
| | Evergreen | Button | :heavycheckmark: | :heavycheckmark: |
left
,
only
,
right
| :heavycheckmark: |
arbitrary pixel sizes
| | Fluent UI | Button | :heavycheckmark: | :x: | | :x: | | | Gestalt | Button | :heavycheckmark: | :x: |
only
| :x: |
lg
,
md
,
sm
| | Grommet | Button | :heavycheckmark: | :x: |
left
,
only
,
right
| :x: | | | Material UI | Button | :heavycheckmark: | :heavycheckmark: |
left
,
only
,
right
| :x: |
large
,
medium
,
small
| | Onsen UI | Button | :heavycheckmark: | :x: | | :x: |
default
,
large
| | Orbit | Button | :heavycheckmark: | :heavycheckmark: |
left
,
only
,
right
| :heavycheckmark: |
large
,
normal
,
small
| | Prime React | Button | :x: | :x: |
left
,
only
,
right
| :x: | | | Quasar | btn | :heavycheckmark: | :heavycheckmark: |
left
,
only
,
right
| :heavycheckmark: |
custom
,
lg
,
md
,
sm
,
xs
| | React Bootstrap | Button | :heavycheckmark: | :heavycheckmark: | | :x: |
lg
,
sm
| | React Toolbox | Button | :heavycheckmark: | :x: |
left
,
only
| :x: | | | react-md | Button | :heavycheckmark: | :x: |
left
,
only
,
right
| :x: | | | Ring UI | Button | :heavycheckmark: | :heavycheckmark: |
left
,
only
| :heavycheckmark: |
default
,
large
,
small
| | Semantic UI | Button | :heavycheckmark: | :heavycheckmark: |
left
,
only
,
right
| :heavycheckmark: |
big
,
huge
,
large
,
massive
,
medium
,
mini
,
small
,
tiny
| | Smooth UI | Button | :heavycheckmark: | :x: | | :x: |
base
,
lg
,
sm
,
xl
,
xs
| | Zendesk Garden | Button | :heavycheckmark: | :heavycheckmark: |
only
| :x: |
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 | :x: | :heavycheckmark: | :heavycheckmark: | :x: |

right
| | Atlaskit | Checkbox | :x: | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: |
right
| | Blueprint | Checkbox | :x: | :x: | :heavycheckmark: | :x: |
left
,
right
| | Carbon Design | Checkbox | :x: | :heavycheckmark: | :heavycheckmark: | :x: |
right
| | Chakra UI | Checkbox | :x: | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: |
right
| | Elastic UI | Checkbox | :x: | :heavycheckmark: | :heavycheckmark: | :x: |
right
| | Element | Checkbox | :x: | :heavycheckmark: | :heavycheckmark: | :x: |
right
| | Elemental UI | Checkbox | :x: | :x: | :x: | :x: |
right
| | Evergreen | Checkbox | :x: | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: |
right
| | Fluent UI | Checkbox | :x: | :heavycheckmark: | :heavycheckmark: | :x: |
left
,
right
| | Gestalt | Checkbox | :x: | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: |
right
| | Grommet | CheckBox | :x: | :heavycheckmark: | :heavycheckmark: | :x: |
right
| | Material UI | Checkbox | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: | :x: |
above
,
below
,
left
,
right
| | Onsen UI | Checkbox | :heavycheckmark: | :x: | :heavycheckmark: | :heavycheckmark: |
right
| | Orbit | Checkbox | :x: | :heavycheckmark: | :x: | :heavycheckmark: |
right
| | Prime React | Checkbox | :x: | :heavycheckmark: | :x: | :x: |
right
| | Quasar | checkbox | :x: | :heavycheckmark: | :heavycheckmark: | :x: |
left
,
right
| | React Bootstrap | Form.Check | :x: | :heavycheckmark: | :x: | :x: | | | React Toolbox | Checkbox | :x: | :heavycheckmark: | :x: | :x: |
right
| | react-md | Checkbox | :heavycheckmark: | :heavycheckmark: | :x: | :x: |
right
| | Ring UI | Checkbox | :x: | :heavycheckmark: | :x: | :x: |
right
| | Semantic UI | Checkbox | :x: | :heavycheckmark: | :heavycheckmark: | :x: |
right
| | Smooth UI | Checkbox | :x: | :heavycheckmark: | :x: | :x: |
right
| | Zendesk Garden | Checkbox | :x: | :heavycheckmark: | :heavycheckmark: | :x: |
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 | :heavycheckmark: | :heavycheckmark: | :x: |

day
,
month
,
quarter
,
week
,
year
| :heavycheckmark: | :heavycheckmark: | :heavycheckmark: | | Blueprint | DatePicker | :x: | :heavycheckmark: | :heavycheckmark: |
day
,
month
,
year
| :heavycheckmark: | :heavycheckmark: | :heavycheckmark: | | Carbon Design | DatePicker | :x: | :x: | :heavycheckmark: |
day
,
year
| :x: | :heavycheckmark: | :heavycheckmark: | | Elastic UI | DatePicker | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: |
day
| :x: | :heavycheckmark: | :heavycheckmark: | | Element | DatePicker | :heavycheckmark: | :x: | :heavycheckmark: |
day
,
month
,
week
,
year
| :heavycheckmark: | :heavycheckmark: | :heavycheckmark: | | Fluent UI | DatePicker | :x: | :x: | :heavycheckmark: |
day
,
month
,
year
| :x: | :heavycheckmark: | :x: | | Gestalt | DatePicker | :x: | :heavycheckmark: | :heavycheckmark: |
day
| :x: | :heavycheckmark: | :x: | | Grommet | DateInput | :x: | :x: | :x: |
day
| :x: | :x: | :x: | | Material UI | DatePicker | :x: | :x: | :x: |
day
| :x: | :x: | :heavycheckmark: | | Quasar | DatePicker | :x: | :x: | :heavycheckmark: |
day
,
month
,
year
| :x: | :heavycheckmark: | :heavycheckmark: | | React Toolbox | DatePicker | :x: | :heavycheckmark: | :heavycheckmark: |
day
,
month
,
year
| :x: | :x: | :x: | | Ring UI | DatePicker | :heavycheckmark: | :x: | :heavycheckmark: |
day
,
month
,
year
| :x: | :heavycheckmark: | :heavycheckmark: | | Zendesk Garden | DatePicker | :x: | :heavycheckmark: | :heavycheckmark: |
day
| :x: | :heavycheckmark: | :x: |

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 | :heavycheckmark: | :x: | :x: | | Carbon Design | ErrorBoundary | :x: | :heavycheckmark: | :x: | | Elastic UI | ErrorBoundary | :x: | :x: | :x: |

Atlaskit, Blueprint, Chakra UI, Element, Elemental UI, Evergreen, Fluent UI, Gestalt, Grommet, Material UI, 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.

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

| Framework | Name | Async | Disabled | Disabled Options | Filterable | Groupable | Icons | | --- | --- | --- | --- | --- | --- | --- | --- | | Ant Design | Select | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: |

end
| | Atlaskit | Select | :heavycheckmark: | :heavycheckmark: | :x: | :heavycheckmark: | :heavycheckmark: | | | Blueprint | Select | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: | | | Carbon Design | Select | :x: | :heavycheckmark: | :heavycheckmark: | :x: | :heavycheckmark: | | | Chakra UI | Select | :x: | :heavycheckmark: | :heavycheckmark: | :x: | :x: | | | Elastic UI | SuperSelect | :heavycheckmark: | :x: | :heavycheckmark: | :x: | :x: |
composable
| | Element | Select | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: | | | Elemental UI | Dropdown | :x: | :x: | :x: | :x: | :heavycheckmark: | | | Evergreen | SelectMenu | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: |
start
| | Fluent UI | Dropdown | :x: | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: |
composable
| | Gestalt | SelectList | :x: | :heavycheckmark: | :heavycheckmark: | :x: | :x: | | | Grommet | Select | :x: | :heavycheckmark: | :heavycheckmark: | :x: | :x: | | | Material UI | Select | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: | :x: | :heavycheckmark: |
composable
| | Onsen UI | Select | :x: | :heavycheckmark: | :heavycheckmark: | :x: | :x: | | | Orbit | Select | :x: | :heavycheckmark: | :heavycheckmark: | :x: | :x: |
end
,
start
| | Prime React | Dropdown | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: |
composable
| | Quasar | Select | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: | :x: | | | React Bootstrap | Dropdown | :x: | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: | | | React Toolbox | Dropdown | :x: | :heavycheckmark: | :heavycheckmark: | :x: | :x: | | | react-md | Dropdown | :x: | :x: | :x: | :x: | :x: |
end
,
start
| | Ring UI | Select | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: | :x: | | | Semantic UI | Dropdown | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: | :x: |
composable
| | Smooth UI | Select | :x: | :heavycheckmark: | :heavycheckmark: | :x: | :x: | | | Zendesk Garden | Select | :x: | :heavycheckmark: | :heavycheckmark: | :x: | :x: |
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 | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: | | Atlaskit | ProgressTracker | :x: | :heavycheckmark: | :x: | :x: | :x: | | Carbon Design | ProgressIndicator | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: | :x: | | Elastic UI | Steps | :heavycheckmark: | :x: | :x: | :x: | :x: | | Element | Steps | :heavycheckmark: | :x: | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: | | Material UI | Stepper | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: | | Prime React | Steps | :x: | :heavycheckmark: | :x: | :x: | :x: | | Quasar | Stepper | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: | | Semantic UI | Steps | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: | :x: | :heavycheckmark: | | Zendesk Garden | Stepper | :x: | :x: | :x: | :x: | :x: |

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 | :heavycheckmark: | :x: | :heavycheckmark: | :heavycheckmark: | | :heavycheckmark: |

default
,
small
| | Atlaskit | Toggle | :heavycheckmark: | :x: | :x: | :x: | | :x: |
large
,
regular
| | Blueprint | Switch | :heavycheckmark: | :x: | :x: | :heavycheckmark: |
left
,
right
| :x: |
default
,
large
| | Carbon Design | Switch | :heavycheckmark: | :x: | :x: | :x: |
right
| :x: |
default
,
small
| | Chakra UI | Switch | :heavycheckmark: | :x: | :x: | :x: |
left
,
right
| :x: |
lg
,
md
,
sm
| | Elastic UI | Switch | :heavycheckmark: | :x: | :x: | :x: |
right
| :x: |
compressed
,
default
| | Element | Switch | :heavycheckmark: | :x: | :x: | :x: |
left
,
right
| :x: | | | Evergreen | Switch | :heavycheckmark: | :x: | :x: | :x: | | :x: |
integers
| | Fluent UI | Toggle | :heavycheckmark: | :x: | :x: | :x: |
left
,
right
| :x: | | | Gestalt | Switch | :heavycheckmark: | :x: | :x: | :x: | | :x: | | | Grommet | CheckBox | :heavycheckmark: | :x: | :x: | :x: |
left
,
right
| :x: | | | Material UI | Switch | :heavycheckmark: | :x: | :x: | :x: |
above
,
below
,
left
,
right
| :x: |
default
,
small
| | Onsen UI | Switch | :heavycheckmark: | :x: | :x: | :x: | | :x: | | | Prime React | InputSwitch | :heavycheckmark: | :x: | :x: | :x: | | :x: | | | Quasar | toggle | :heavycheckmark: | :x: | :heavycheckmark: | :x: |
left
,
right
| :x: |
custom
,
lg
,
md
,
sm
,
xl
,
xs
| | React Bootstrap | Form.Check | :heavycheckmark: | :x: | :x: | :x: |
right
| :x: | | | React Toolbox | Switch | :heavycheckmark: | :x: | :x: | :x: |
right
| :x: | | | Ring UI | Toggle | :heavycheckmark: | :x: | :x: | :x: |
left
,
right
| :x: | | | Smooth UI | Switch | :heavycheckmark: | :x: | :x: | :heavycheckmark: | | :x: |
base
,
lg
,
sm
,
xl
,
xs
| | Zendesk Garden | Toggle | :x: | :x: | :x: | :x: |
above
,
below
| :x: | |

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 | :heavycheckmark: | | Atlaskit | Tabs | :x: | | Blueprint | Tabs | :heavycheckmark: | | Carbon Design | Tabs | :x: | | Chakra UI | Tabs | :heavycheckmark: | | Elastic UI | Tabs | :x: | | Element | Tabs | :heavycheckmark: | | Evergreen | Tablist | :heavycheckmark: | | Fluent UI | Pivot | :x: | | Gestalt | Tabs | :x: | | Grommet | Tabs | :x: | | Material UI | Tabs | :heavycheckmark: | | Onsen UI | Tabbar | :x: | | Prime React | TabView | :x: | | Quasar | tabs | :heavycheckmark: | | React Bootstrap | Tabs | :x: | | React Toolbox | Tabs | :x: | | react-md | Tabs | :x: | | Ring UI | Tabs | :x: | | Semantic UI | Tabs | :x: | | Zendesk Garden | Tabs | :heavycheckmark: |

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
.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.