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!
| Name | Native Dark Mode | Design Kits | RTL Support | Themer | Native TypeScript |
|---|---|---|---|---|---|
| Ant Design | Link | ||||
| Atlaskit | -- | -- | -- | -- | |
| Blueprint | -- | ||||
| Carbon Design | Link | -- | |||
| Chakra UI | -- | -- | |||
| Elastic UI | -- | -- | |||
| Element | -- | -- | Link | -- | |
| Elemental UI | -- | -- | -- | -- | -- |
| Evergreen | -- | -- | -- | -- | |
| Fluent UI | -- | -- | |||
| Gestalt | -- | -- | -- | -- | |
| Grommet | -- | Link | |||
| MUI | Link | ||||
| Onsen UI | -- | -- | -- | ||
| Orbit | -- | Link | -- | ||
| Prime React | -- | -- | -- | -- | |
| Quasar | -- | Link | |||
| React Bootstrap | -- | -- | -- | -- | |
| React Toolbox | -- | -- | -- | -- | |
| react-md | -- | -- | -- | ||
| Ring UI | -- | -- | -- | -- | -- |
| Semantic UI | -- | -- | -- | ||
| Smooth UI | -- | -- | -- | -- | |
| Zendesk Garden | -- | -- | -- |
| 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.
| 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.
| 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.
| 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.
| 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 |
| 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 |
| 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.
| 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.
| Framework | Name | Compact | Edge # | First/Last | # of Pages | 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.
| 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 | -- |
| 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.
| 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.
| 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.