{"id":13455528,"url":"https://github.com/dimitropoulos/react-ui-roundup","last_synced_at":"2026-03-09T07:13:58.194Z","repository":{"id":44844119,"uuid":"229484909","full_name":"dimitropoulos/react-ui-roundup","owner":"dimitropoulos","description":"A one-stop-shop for comparing the features of all the best React frameworks.  Useful for designers and engineers alike!","archived":false,"fork":false,"pushed_at":"2023-06-13T04:26:41.000Z","size":610,"stargazers_count":268,"open_issues_count":11,"forks_count":11,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-10-28T22:36:09.537Z","etag":null,"topics":["ant-design","antd","atlaskit","blueprint","blueprintjs","carbon-design-system","chakra-ui","elastic-ui","elemental-ui","gestalt","grommet","material-design","material-ui","onsen-ui","prime-react","react","react-toolbox","reactjs","semantic-ui","typescript"],"latest_commit_sha":null,"homepage":"https://react-ui-roundup.dimitrimitropoulos.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dimitropoulos.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-12-21T21:24:31.000Z","updated_at":"2024-10-24T21:10:59.000Z","dependencies_parsed_at":"2024-01-07T21:05:45.116Z","dependency_job_id":"b74e8b00-97d8-4ba9-bfa3-ea304023c064","html_url":"https://github.com/dimitropoulos/react-ui-roundup","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimitropoulos%2Freact-ui-roundup","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimitropoulos%2Freact-ui-roundup/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimitropoulos%2Freact-ui-roundup/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimitropoulos%2Freact-ui-roundup/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dimitropoulos","download_url":"https://codeload.github.com/dimitropoulos/react-ui-roundup/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245235620,"owners_count":20582272,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ant-design","antd","atlaskit","blueprint","blueprintjs","carbon-design-system","chakra-ui","elastic-ui","elemental-ui","gestalt","grommet","material-design","material-ui","onsen-ui","prime-react","react","react-toolbox","reactjs","semantic-ui","typescript"],"created_at":"2024-07-31T08:01:06.772Z","updated_at":"2026-03-09T07:13:58.149Z","avatar_url":"https://github.com/dimitropoulos.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n# React UI Roundup\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\nAre 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!\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n- [About](#About)\n- [Framework Statistics](#Framework-Statistics)\n- [Framework Features](#Framework-Features)\n- [Components](#Components)\n  - [Alert](#Alert)\n  - [AppBar](#AppBar)\n  - [Avatar](#Avatar)\n  - [AvatarGroup](#AvatarGroup)\n  - [Button](#Button)\n  - [Checkbox](#Checkbox)\n  - [DatePicker](#DatePicker)\n  - [ErrorBoundary](#ErrorBoundary)\n  - [Pagination](#Pagination)\n  - [Select](#Select)\n  - [Stepper](#Stepper)\n  - [Switch](#Switch)\n  - [Tabs](#Tabs)\n\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n# About\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\nI decided to make this project [while contributing an Alert component to material-ui](https://github.com/mui-org/material-ui/issues/18094). 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.\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\nAn even more better version of this exact document is available at [react-ui-roundup.dimitrimitropoulos.com](http://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.\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n# Frameworks\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n## Framework Statistics\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n| Name | Homepage | Repository | Stars | Forks | Issues | License |\n| --- | --- | --- | --- | --- | --- | --- |\n| Ant Design | [ant.design](https://ant.design) | [ant-design/ant-design](https://github.com/ant-design/ant-design) | 82,199 | 36,207 | 929 | MIT |\n| Atlaskit | [atlassian.design](https://atlassian.design) | [bitbucket.org/atlassian/atlaskit-mk-2](https://bitbucket.org/atlassian/atlaskit-mk-2) | -- | -- | -- | -- |\n| Blueprint | [blueprintjs.com](https://blueprintjs.com) | [palantir/blueprint](https://github.com/palantir/blueprint) | 19,338 | 2,062 | 669 | Apache 2.0 |\n| Carbon Design | [react.carbondesignsystem.com](http://react.carbondesignsystem.com) | [carbon-design-system/carbon](https://github.com/carbon-design-system/carbon) | 5,973 | 1,405 | 541 | Apache 2.0 |\n| Chakra UI | [chakra-ui.com/docs](https://chakra-ui.com/docs) | [chakra-ui/chakra-ui](https://github.com/chakra-ui/chakra-ui) | 28,998 | 2,589 | 84 | MIT |\n| Elastic UI | [elastic.github.io/eui](https://elastic.github.io/eui) | [elastic/eui](https://github.com/elastic/eui) | 5,350 | 714 | 354 | Other |\n| Element | [element.eleme.io](https://element.eleme.io) | [ElemeFE/element](https://github.com/ElemeFE/element) | 52,726 | 14,246 | 2,301 | MIT |\n| Elemental UI | [elemental-ui.com](http://elemental-ui.com) | [elementalui/elemental](https://github.com/elementalui/elemental) | 4,322 | 242 | 49 | MIT |\n| Evergreen | [evergreen.segment.com](https://evergreen.segment.com) | [segmentio/evergreen](https://github.com/segmentio/evergreen) | 11,821 | 817 | 45 | MIT |\n| Fluent UI | [developer.microsoft.com/en-us/fluentui](https://developer.microsoft.com/en-us/fluentui) | [microsoft/fluentui](https://github.com/microsoft/fluentui) | 14,113 | 2,316 | 675 | Other |\n| Gestalt | [gestalt.netlify.app](https://gestalt.netlify.app) | [pinterest/gestalt](https://github.com/pinterest/gestalt) | 4,023 | 321 | 15 | Apache 2.0 |\n| Grommet | [v2.grommet.io](https://v2.grommet.io) | [grommet/grommet](https://github.com/grommet/grommet) | 8,048 | 982 | 198 | Apache 2.0 |\n| MUI | [mui.com/material-ui/](https://mui.com/material-ui/) | [mui/material-ui](https://github.com/mui/material-ui) | 81,915 | 28,229 | 1,278 | MIT |\n| Onsen UI | [onsen.io](https://onsen.io) | [OnsenUI/OnsenUI](https://github.com/OnsenUI/OnsenUI) | 8,641 | 1,024 | 104 | -- |\n| Orbit | [orbit.kiwi](https://orbit.kiwi) | [kiwicom/orbit](https://github.com/kiwicom/orbit) | 1,254 | 128 | 26 | MIT |\n| Prime React | [primefaces.org/primereact](https://primefaces.org/primereact) | [primefaces/primereact](https://github.com/primefaces/primereact) | 3,190 | 647 | 200 | MIT |\n| Quasar | [quasar.dev](https://quasar.dev) | [quasarframework/quasar](https://github.com/quasarframework/quasar) | 22,121 | 2,979 | 448 | MIT |\n| React Bootstrap | [react-bootstrap.github.io](https://react-bootstrap.github.io) | [react-bootstrap/react-bootstrap](https://github.com/react-bootstrap/react-bootstrap) | 21,160 | 3,417 | 164 | MIT |\n| React Toolbox | [react-toolbox.io](http://react-toolbox.io) | [react-toolbox/react-toolbox](https://github.com/react-toolbox/react-toolbox) | 8,700 | 1,040 | 268 | MIT |\n| react-md | [react-md.dev](https://react-md.dev) | [mlaursen/react-md](https://github.com/mlaursen/react-md) | 2,322 | 316 | 52 | MIT |\n| Ring UI | [jetbrains.github.io/ring-ui/master/index.html?path=/docs](https://jetbrains.github.io/ring-ui/master/index.html?path=/docs) | [JetBrains/ring-ui](https://github.com/JetBrains/ring-ui) | 3,293 | 191 | 7 | Apache 2.0 |\n| Semantic UI | [semantic-ui.com](https://semantic-ui.com) | [Semantic-Org/Semantic-UI](https://github.com/Semantic-Org/Semantic-UI) | 50,195 | 5,108 | 1,059 | MIT |\n| Smooth UI | [smooth-code.com/open-source/smooth-ui](https://smooth-code.com/open-source/smooth-ui) | [smooth-code/smooth-ui](https://github.com/smooth-code/smooth-ui) | 1,603 | 114 | 10 | MIT |\n| Zendesk Garden | [garden.zendesk.com](https://garden.zendesk.com) | [zendeskgarden/react-components](https://github.com/zendeskgarden/react-components) | 1,030 | 86 | 15 | Apache 2.0 |\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n\u003e all of the above statistics were last updated Wed, 12 Oct 2022 18:16:19 GMT.  For real-time data, [see the website](http://react-ui-roundup.dimitrimitropoulos.com).\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n## Framework Features\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n#### Criteria\n\n- `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.\n- `Design Kits`: Ready-made resources exist for designers such as Sketch or Figma download packs.\n- `RTL Support`: Explicit right-to-Left support for use in apps with languages like Arabic, Hebrew, or Persian.\n- `Themer`: A user-interactable theming area where designers and developers can play around with look and feel without needing to do any programming.\n- `Native TypeScript`: Is either written in TypeScript (ideally) or has TypeScript definitions directly in the project.  DefinitelyTyped does not qualify.\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n| Name | Native Dark Mode | Design Kits | RTL Support | Themer | Native TypeScript |\n| --- | --- | --- | --- | --- | --- |\n| Ant Design | :heavy_check_mark: | [Figma](https://ant.design/docs/spec/download), [Sketch](https://ant.design/docs/spec/download) | :heavy_check_mark: | [Link](https://antdtheme.com/aliyun) | :heavy_check_mark: |\n| Atlaskit | :x: | [Sketch](https://atlassian.design/guidelines/product/resources/web-product-gui-pack) | :x: | :x: | :x: |\n| Blueprint | :heavy_check_mark: | [Sketch](https://blueprintjs.com/docs/#resources) | :heavy_check_mark: | :x: | :heavy_check_mark: |\n| Carbon Design | :heavy_check_mark: | [Sketch](https://www.carbondesignsystem.com/resources#theme-libraries) | :heavy_check_mark: | [Link](https://themes.carbondesignsystem.com/?nav=button) | :x: |\n| Chakra UI | :heavy_check_mark: | :x: | :heavy_check_mark: | :x: | :heavy_check_mark: |\n| Elastic UI | :heavy_check_mark: | [Sketch](https://elastic.github.io/eui) | :x: | :x: | :heavy_check_mark: |\n| Element | :x: | [Axure](https://element.eleme.io/#/en-US/resource), [Sketch](https://element.eleme.io/#/en-US/resource) | :x: | [Link](https://element.eleme.io/#/en-US/theme/preview) | :x: |\n| Elemental UI | :x: | :x: | :x: | :x: | :x: |\n| Evergreen | :x: | [Sketch](https://evergreen.segment.com/for-designers) | :x: | :x: | :x: |\n| Fluent UI | :heavy_check_mark: | [Figma](https://developer.microsoft.com/en-us/fluentui#/resources), [Sketch](https://developer.microsoft.com/en-us/fluentui#/resources) | :x: | :x: | :heavy_check_mark: |\n| Gestalt | :x: | :x: | :heavy_check_mark: | :x: | :x: |\n| Grommet | :x: | [Custom](https://designer.grommet.io/), [Framer X](https://github.com/grommet/design-kit/blob/master/grommet-2-open-theme.framerx), [Sketch](https://github.com/grommet/design-kit) | :heavy_check_mark: | [Link](https://theme-designer.grommet.io/Dashboard) | :heavy_check_mark: |\n| MUI | :heavy_check_mark: | [Adobe XD](https://mui.com/material-ui//discover-more/related-projects/#design-resources), [Figma](https://mui.com/material-ui//discover-more/related-projects/#design-resources), [Sketch](https://mui.com/material-ui//discover-more/related-projects/#design-resources) | :heavy_check_mark: | [Link](https://mui.com/material-ui//discover-more/related-projects/#theming) | :heavy_check_mark: |\n| Onsen UI | :heavy_check_mark: | :x: | :x: | :x: | :heavy_check_mark: |\n| Orbit | :x: | [Abstract](https://orbit.kiwi/getting-started/for-designers), [Sketch](https://orbit.kiwi/getting-started/for-designers) | :heavy_check_mark: | [Link](https://themer.orbit.kiwi/) | :x: |\n| Prime React | :heavy_check_mark: | :x: | :x: | :x: | :x: |\n| Quasar | :heavy_check_mark: | :x: | :heavy_check_mark: | [Link](https://quasar.dev/style/theme-builder) | :heavy_check_mark: |\n| React Bootstrap | :x: | :x: | :x: | :x: | :heavy_check_mark: |\n| React Toolbox | :x: | :x: | :x: | :x: | :heavy_check_mark: |\n| react-md | :heavy_check_mark: | :x: | :x: | :x: | :heavy_check_mark: |\n| Ring UI | :x: | :x: | :x: | :x: | :x: |\n| Semantic UI | :x: | [Sketch](https://semantic-ui.com/introduction/advanced-usage.html#sketch-files) | :heavy_check_mark: | :x: | :x: |\n| Smooth UI | :heavy_check_mark: | :x: | :x: | :x: | :x: |\n| Zendesk Garden | :x: | :x: | :heavy_check_mark: | :x: | :heavy_check_mark: |\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n# Components\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n## Alert\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\nAlerts are used to show an important message to users.\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n#### Criteria\n\n- `Closable`: The alert has an \"out of the box\" way to dismiss, usually with an `onClose` prop.\n- `Types`: The alert has ready-made variations.\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n| Framework | Name | Closable | Types |\n| --- | --- | --- | --- |\n| Ant Design | [Alert](https://ant.design/components/alert) | :heavy_check_mark: | `error`, `info`, `success`, `warning` |\n| Atlaskit | [SectionMessage](https://atlassian.design/components/section-message) | :x: | `change`, `confirmation`, `error`, `info`, `warning` |\n| Atlaskit | [Flag](https://atlassian.design/components/flag) | :x: | `change`, `confirmation`, `error`, `info`, `warning` |\n| Chakra UI | [Alert](https://chakra-ui.com/docs/feedback/alert) | :heavy_check_mark: | `error`, `info`, `success`, `warning` |\n| Element | [Alert](https://element.eleme.io/#/en-US/component/alert) | :heavy_check_mark: | `error`, `info`, `success`, `warning` |\n| Elemental UI | [Alert](http://elemental-ui.com/misc) | :x: | `danger`, `info`, `primary`, `success`, `warning` |\n| Evergreen | [Alert](https://evergreen.segment.com/components/alert) | :heavy_check_mark: | `danger`, `none`, `success`, `warning` |\n| Fluent UI | [MessageBar](https://developer.microsoft.com/en-us/fluentui#/controls/web/messagebar) | :heavy_check_mark: | `blocked`, `error`, `info`, `remove`, `severeWarning`, `success`, `warning` |\n| MUI | [Alert](https://mui.com/material-ui//react-alert) | :heavy_check_mark: | `error`, `info`, `success`, `warning` |\n| Orbit | [Alert](https://orbit.kiwi/components/information/alert-message/) | :heavy_check_mark: | `critical`, `info`, `success`, `warning` |\n| Quasar | [banner](https://quasar.dev/vue-components/banner) | :x: |  |\n| React Bootstrap | [Alert](https://react-bootstrap.github.io/components/alerts) | :heavy_check_mark: | `danger`, `dark`, `info`, `light`, `primary`, `secondary`, `success`, `warning` |\n| Ring UI | [Alert](https://jetbrains.github.io/ring-ui/master/index.html?path=/docs/components-alert--simple) | :heavy_check_mark: | `error`, `loading`, `message`, `success`, `warning` |\n| Smooth UI | [Alert](https://smooth-code.com/open-source/smooth-ui/docs/alert) | :x: | `danger`, `dark`, `info`, `light`, `primary`, `secondary`, `success`, `warning` |\n| Zendesk Garden | [Notification](https://garden.zendesk.com/components) | :heavy_check_mark: | `error`, `info`, `success`, `warning` |\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n\u003e [Blueprint](https://github.com/palantir/blueprint), [Carbon Design](https://github.com/carbon-design-system/carbon), [Elastic UI](https://github.com/elastic/eui), [Gestalt](https://github.com/pinterest/gestalt), [Grommet](https://github.com/grommet/grommet), [Onsen UI](https://github.com/OnsenUI/OnsenUI), [Prime React](https://github.com/primefaces/primereact), [React Toolbox](https://github.com/react-toolbox/react-toolbox), [react-md](https://github.com/mlaursen/react-md), and [Semantic UI](https://github.com/Semantic-Org/Semantic-UI) appear to be missing an Alert component. [Please file an issue](https://github.com/dimitropoulos/react-ui-roundup/issues/new) if one now exists.\n\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n## AppBar\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\nThe AppBar displays information and actions relating to the current screen.\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n#### Criteria\n\n- `API`: The API style used for the components contained within the AppBar.\n- `Dense`: There is a built-in way to make the bar take up less vertical space.\n- `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.\n- `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.\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n| Framework | Name | API | Dense | Sticky | Theme Mode |\n| --- | --- | --- | --- | --- | --- |\n| Elastic UI | [Header](https://elastic.github.io/eui/#/layout/header) | `customComponents` | :x: | :heavy_check_mark: | :heavy_check_mark: |\n| MUI | [AppBar](https://mui.com/material-ui//react-app-bar) | `children` | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |\n| React Toolbox | [AppBar](http://react-toolbox.io/#/components/app_bar) | `props` | :x: | :heavy_check_mark: | :x: |\n| react-md | [AppBar](https://react-md.dev/packages/app-bar/demos) | `customComponents` | :heavy_check_mark: | :x: | :heavy_check_mark: |\n| Ring UI | [Header](https://jetbrains.github.io/ring-ui/master/index.html?path=/docs/components-header--header) | `children` | :heavy_check_mark: | :x: | :heavy_check_mark: |\n| Zendesk Garden | [Header](https://garden.zendesk.com/components/chrome#header) | `customComponents` | :heavy_check_mark: | :x: | :heavy_check_mark: |\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n\u003e [Ant Design](https://github.com/ant-design/ant-design), [Atlaskit](https://bitbucket.org/atlassian/atlaskit-mk-2), [Blueprint](https://github.com/palantir/blueprint), [Carbon Design](https://github.com/carbon-design-system/carbon), [Chakra UI](https://github.com/chakra-ui/chakra-ui), [Element](https://github.com/ElemeFE/element), [Elemental UI](https://github.com/elementalui/elemental), [Evergreen](https://github.com/segmentio/evergreen), [Fluent UI](https://github.com/microsoft/fluentui), [Gestalt](https://github.com/pinterest/gestalt), [Grommet](https://github.com/grommet/grommet), [Onsen UI](https://github.com/OnsenUI/OnsenUI), [Orbit](https://github.com/kiwicom/orbit), [Prime React](https://github.com/primefaces/primereact), [Quasar](https://github.com/quasarframework/quasar), [React Bootstrap](https://github.com/react-bootstrap/react-bootstrap), [Semantic UI](https://github.com/Semantic-Org/Semantic-UI), and [Smooth UI](https://github.com/smooth-code/smooth-ui) appear to be missing an AppBar component. [Please file an issue](https://github.com/dimitropoulos/react-ui-roundup/issues/new) if one now exists.\n\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n## Avatar\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\nAvatars can be used to represent people or objects.\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n#### Criteria\n\n- `Badge`: A custom badge or status is available or easily configurable.\n- `Shapes`: Avatars can be easily formed into different styles using a prop or similar mechanism (not custom CSS).\n- `Sizes`: Avatars can be easily sized between different (and consistent) major sizes.\n- `Types`: Avatars can be presented to users as icons (i.e. generic fallback illustrations), custom images, or can contain text.\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n| Framework | Name | Badge | Shapes | Sizes | Types |\n| --- | --- | --- | --- | --- | --- |\n| Ant Design | [Avatar](https://ant.design/components/avatar) | :heavy_check_mark: | `circle`, `square` | `default`, `large`, `number`, `small` | `icon`, `image`, `text` |\n| Atlaskit | [Avatar](https://atlassian.design/components/avatar) | :x: | `circle`, `square` | `large`, `medium`, `small`, `xlarge`, `xsmall`, `xxlarge` | `icon`, `image` |\n| Chakra UI | [Avatar](https://chakra-ui.com/docs/media-and-icons//avatar) | :heavy_check_mark: | `circle` | `2xl`, `2xs`, `lg`, `md`, `sm`, `xl`, `xs` |  |\n| Element | [Avatar](https://element.eleme.io/#/en-US/component/avatar) | :x: | `circle`, `square` | `large`, `medium`, `number`, `small` | `image`, `image`, `text` |\n| Evergreen | [Avatar](https://evergreen.segment.com/components/avatar) | :x: | `circle` | `number` | `image`, `text` |\n| Fluent UI | [Persona](https://developer.microsoft.com/en-us/fluentui#/controls/web/persona) | :heavy_check_mark: | `circle`, `rounded-square` | `number` | `icon`, `image`, `text` |\n| MUI | [Avatar](https://mui.com/material-ui//react-avatar) | :heavy_check_mark: | `circle`, `rounded-square`, `square` | `number` | `icon`, `image`, `text` |\n| Quasar | [avatar](https://quasar.dev/vue-components/avatar) | :heavy_check_mark: | `circle`, `rounded-square`, `square` | `lg`, `md`, `number`, `sm`, `xl`, `xs` | `icon`, `image`, `text` |\n| Ring UI | [Avatar](https://jetbrains.github.io/ring-ui/master/index.html?path=/docs/components-avatar--basic) | :x: | `circle`, `rounded-square` | `18`, `20`, `24`, `32`, `40`, `48`, `56`, `number` | `image` |\n| Zendesk Garden | [Avatar](https://garden.zendesk.com/components/avatar) | :heavy_check_mark: | `circle`, `rounded-square` | `extraextrasmall`, `extrasmall`, `large`, `medium`, `small` | `icon`, `image`, `text` |\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n\u003e [Blueprint](https://github.com/palantir/blueprint), [Carbon Design](https://github.com/carbon-design-system/carbon), [Elastic UI](https://github.com/elastic/eui), [Elemental UI](https://github.com/elementalui/elemental), [Gestalt](https://github.com/pinterest/gestalt), [Grommet](https://github.com/grommet/grommet), [Onsen UI](https://github.com/OnsenUI/OnsenUI), [Orbit](https://github.com/kiwicom/orbit), [Prime React](https://github.com/primefaces/primereact), [React Bootstrap](https://github.com/react-bootstrap/react-bootstrap), [React Toolbox](https://github.com/react-toolbox/react-toolbox), [react-md](https://github.com/mlaursen/react-md), [Semantic UI](https://github.com/Semantic-Org/Semantic-UI), and [Smooth UI](https://github.com/smooth-code/smooth-ui) appear to be missing an Avatar component. [Please file an issue](https://github.com/dimitropoulos/react-ui-roundup/issues/new) if one now exists.\n\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n## AvatarGroup\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\nAvatarGroups stack a set of Avatars into a customized list, often with customized animations and options.\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n#### Criteria\n\n- `Cascade Direction`: A prop exists that allows you to set whether the children overlap above or below each other.\n- `Expandable Group`: Avatar groups support expandable lists where a user can click to see more members in the list.\n- `Max Count`: A custom number can be set representing the number of avatars shown.\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n| Framework | Name | Cascade Direction | Expandable Group | Max Count |\n| --- | --- | --- | --- | --- |\n| Ant Design | [Avatar.Group](https://ant.design/components/avatar) | `above` | :heavy_check_mark: | :heavy_check_mark: |\n| Atlaskit | [AvatarGroup](https://atlassian.design/components/avatar-group) | `below` | :heavy_check_mark: | :heavy_check_mark: |\n| Chakra UI | [AvatarGroup](https://chakra-ui.com/docs/media-and-icons/avatar) | `below` | :x: | :heavy_check_mark: |\n| Fluent UI | [Facepile](https://developer.microsoft.com/en-us/fluentui#/controls/web/facepile) | `no-overlap` | :heavy_check_mark: | :heavy_check_mark: |\n| MUI | [AvatarGroup](https://mui.com/material-ui//react-avatar) | `below` | :x: | :heavy_check_mark: |\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n\u003e [Blueprint](https://github.com/palantir/blueprint), [Carbon Design](https://github.com/carbon-design-system/carbon), [Elastic UI](https://github.com/elastic/eui), [Element](https://github.com/ElemeFE/element), [Elemental UI](https://github.com/elementalui/elemental), [Evergreen](https://github.com/segmentio/evergreen), [Gestalt](https://github.com/pinterest/gestalt), [Grommet](https://github.com/grommet/grommet), [Onsen UI](https://github.com/OnsenUI/OnsenUI), [Orbit](https://github.com/kiwicom/orbit), [Prime React](https://github.com/primefaces/primereact), [Quasar](https://github.com/quasarframework/quasar), [React Bootstrap](https://github.com/react-bootstrap/react-bootstrap), [React Toolbox](https://github.com/react-toolbox/react-toolbox), [react-md](https://github.com/mlaursen/react-md), [Ring UI](https://github.com/JetBrains/ring-ui), [Semantic UI](https://github.com/Semantic-Org/Semantic-UI), [Smooth UI](https://github.com/smooth-code/smooth-ui), and [Zendesk Garden](https://github.com/zendeskgarden/react-components) appear to be missing an AvatarGroup component. [Please file an issue](https://github.com/dimitropoulos/react-ui-roundup/issues/new) if one now exists.\n\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n## Button\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\nUsers trigger actions by clicking on buttons.\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n#### Criteria\n\n- `Disabled`: A `disabled` prop exists for use in situations where the user cannot interact with the button.\n- `Groupable`: A ButtonGroup component exists in the library, or other such pre-made methods for making button groups.\n- `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`).\n- `Loading`: The button has a pre-made loading state for asynchronous events.\n- `Sizes`: The button can be easily sized between different (and consistent) major sizes.\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n| Framework | Name | Disabled | Groupable | Icon | Loading | Sizes |\n| --- | --- | --- | --- | --- | --- | --- |\n| Ant Design | [Button](https://ant.design/components/button) | :heavy_check_mark: | :heavy_check_mark: | `left`, `only`, `right` | :heavy_check_mark: | `default`, `large`, `small` |\n| Atlaskit | [Button](https://atlassian.design/components/button) | :heavy_check_mark: | :heavy_check_mark: | `left`, `right` | :heavy_check_mark: |  |\n| Blueprint | [Button](https://blueprintjs.com/docs/#core/components/button) | :heavy_check_mark: | :heavy_check_mark: | `left`, `only`, `right` | :heavy_check_mark: | `default`, `large` |\n| Carbon Design | [Button](http://react.carbondesignsystem.com/?path=/story/buttons--default) | :heavy_check_mark: | :heavy_check_mark: | `only`, `right` | :heavy_check_mark: | `default`, `field`, `small` |\n| Chakra UI | [Button](https://chakra-ui.com/docs/form/button) | :heavy_check_mark: | :x: | `left`, `only`, `right` | :x: | `lg`, `md`, `sm`, `xs` |\n| Elastic UI | [Button](https://elastic.github.io/eui/#/navigation/button) | :heavy_check_mark: | :heavy_check_mark: | `left`, `only`, `right` | :heavy_check_mark: | `m`, `sm`, `xs` |\n| Element | [Button](https://element.eleme.io/#/en-US/component/button) | :heavy_check_mark: | :heavy_check_mark: | `left`, `only`, `right` | :heavy_check_mark: | `default`, `medium`, `mini`, `small` |\n| Elemental UI | [Button](http://elemental-ui.com/buttons) | :x: | :heavy_check_mark: |  | :x: | `default`, `extra small`, `large`, `small` |\n| Evergreen | [Button](https://evergreen.segment.com/components/buttons) | :heavy_check_mark: | :heavy_check_mark: | `left`, `only`, `right` | :heavy_check_mark: | `arbitrary pixel sizes` |\n| Fluent UI | [Button](https://developer.microsoft.com/en-us/fluentui#/controls/web/button) | :heavy_check_mark: | :x: |  | :x: |  |\n| Gestalt | [Button](https://gestalt.netlify.app/button) | :heavy_check_mark: | :x: | `only` | :x: | `lg`, `md`, `sm` |\n| Grommet | [Button](https://v2.grommet.io/button) | :heavy_check_mark: | :x: | `left`, `only`, `right` | :x: |  |\n| MUI | [Button](https://mui.com/material-ui//react-button) | :heavy_check_mark: | :heavy_check_mark: | `left`, `only`, `right` | :x: | `large`, `medium`, `small` |\n| Onsen UI | [Button](https://onsen.io/v2/api/react/Button.html) | :heavy_check_mark: | :x: |  | :x: | `default`, `large` |\n| Orbit | [Button](https://orbit.kiwi/components/action/button/) | :heavy_check_mark: | :heavy_check_mark: | `left`, `only`, `right` | :heavy_check_mark: | `large`, `normal`, `small` |\n| Prime React | [Button](https://primefaces.org/primereact/button) | :x: | :x: | `left`, `only`, `right` | :x: |  |\n| Quasar | [btn](https://quasar.dev/vue-components/button) | :heavy_check_mark: | :heavy_check_mark: | `left`, `only`, `right` | :heavy_check_mark: | `custom`, `lg`, `md`, `sm`, `xs` |\n| React Bootstrap | [Button](https://react-bootstrap.github.io/components/buttons) | :heavy_check_mark: | :heavy_check_mark: |  | :x: | `lg`, `sm` |\n| React Toolbox | [Button](http://react-toolbox.io/#/components/button) | :heavy_check_mark: | :x: | `left`, `only` | :x: |  |\n| react-md | [Button](https://react-md.dev/packages/buttons/demos) | :heavy_check_mark: | :x: | `left`, `only`, `right` | :x: |  |\n| Ring UI | [Button](https://jetbrains.github.io/ring-ui/master/index.html?path=/docs/components-button--basic) | :heavy_check_mark: | :heavy_check_mark: | `left`, `only` | :heavy_check_mark: | `default`, `large`, `small` |\n| Semantic UI | [Button](https://semantic-ui.com/elements/button.html) | :heavy_check_mark: | :heavy_check_mark: | `left`, `only`, `right` | :heavy_check_mark: | `big`, `huge`, `large`, `massive`, `medium`, `mini`, `small`, `tiny` |\n| Smooth UI | [Button](https://smooth-code.com/open-source/smooth-ui/docs/button) | :heavy_check_mark: | :x: |  | :x: | `base`, `lg`, `sm`, `xl`, `xs` |\n| Zendesk Garden | [Button](https://garden.zendesk.com/components/button) | :heavy_check_mark: | :heavy_check_mark: | `only` | :x: | `default`, `large`, `small` |\n\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n## Checkbox\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\nUsers toggle between checked, unchecked (or indeterminate) values with checkboxes.\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n#### Criteria\n\n- `Custom Icon`: A custom icon can be provided in place of the checkbox itself via a prop or a child.\n- `Disabled`: The checkbox has a `disabled` state, indicating the user cannot interact with it.\n- `Indeterminate`: The checkbox has an indeterminate state.\n- `Invalid`: The checkbox has an `invalid` or `error` state.\n- `Label Placement`: The text can be positioned at different places around the checkbox.\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n| Framework | Name | Custom Icon | Disabled | Indeterminate | Invalid | Label Placement |\n| --- | --- | --- | --- | --- | --- | --- |\n| Ant Design | [Checkbox](https://ant.design/components/checkbox) | :x: | :heavy_check_mark: | :heavy_check_mark: | :x: | `right` |\n| Atlaskit | [Checkbox](https://atlassian.design/components/checkbox) | :x: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | `right` |\n| Blueprint | [Checkbox](https://blueprintjs.com/docs/#core/components/checkbox) | :x: | :x: | :heavy_check_mark: | :x: | `left`, `right` |\n| Carbon Design | [Checkbox](http://react.carbondesignsystem.com/?path=/story/checkbox--checked) | :x: | :heavy_check_mark: | :heavy_check_mark: | :x: | `right` |\n| Chakra UI | [Checkbox](https://chakra-ui.com/docs/form/checkbox) | :x: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | `right` |\n| Elastic UI | [Checkbox](https://elastic.github.io/eui/#/forms/form-controls) | :x: | :heavy_check_mark: | :heavy_check_mark: | :x: | `right` |\n| Element | [Checkbox](https://element.eleme.io/#/en-US/component/checkbox) | :x: | :heavy_check_mark: | :heavy_check_mark: | :x: | `right` |\n| Elemental UI | [Checkbox](http://elemental-ui.com/components/checkbox) | :x: | :x: | :x: | :x: | `right` |\n| Evergreen | [Checkbox](https://evergreen.segment.com/components/checkbox) | :x: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | `right` |\n| Fluent UI | [Checkbox](https://developer.microsoft.com/en-us/fluentui#/controls/web/checkbox) | :x: | :heavy_check_mark: | :heavy_check_mark: | :x: | `left`, `right` |\n| Gestalt | [Checkbox](https://gestalt.netlify.app/checkbox) | :x: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | `right` |\n| Grommet | [CheckBox](https://v2.grommet.io/checkbox) | :x: | :heavy_check_mark: | :heavy_check_mark: | :x: | `right` |\n| MUI | [Checkbox](https://mui.com/material-ui//react-checkbox) | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :x: | `above`, `below`, `left`, `right` |\n| Onsen UI | [Checkbox](https://onsen.io/v2/api/react/Checkbox.html) | :heavy_check_mark: | :x: | :heavy_check_mark: | :heavy_check_mark: | `right` |\n| Orbit | [Checkbox](https://orbit.kiwi/components/input/checkbox) | :x: | :heavy_check_mark: | :x: | :heavy_check_mark: | `right` |\n| Prime React | [Checkbox](https://primefaces.org/primereact/checkbox) | :x: | :heavy_check_mark: | :x: | :x: | `right` |\n| Quasar | [checkbox](https://quasar.dev/vue-components/checkbox) | :x: | :heavy_check_mark: | :heavy_check_mark: | :x: | `left`, `right` |\n| React Bootstrap | [Form.Check](https://react-bootstrap.github.io/components/forms/#forms-form-check) | :x: | :heavy_check_mark: | :x: | :x: |  |\n| React Toolbox | [Checkbox](http://react-toolbox.io/#/components/checkbox) | :x: | :heavy_check_mark: | :x: | :x: | `right` |\n| react-md | [Checkbox](https://react-md.dev/packages/form/selection-control-demos) | :heavy_check_mark: | :heavy_check_mark: | :x: | :x: | `right` |\n| Ring UI | [Checkbox](https://jetbrains.github.io/ring-ui/master/index.html?path=/docs/components-checkbox--basic) | :x: | :heavy_check_mark: | :x: | :x: | `right` |\n| Semantic UI | [Checkbox](https://semantic-ui.com/modules/checkbox.html) | :x: | :heavy_check_mark: | :heavy_check_mark: | :x: | `right` |\n| Smooth UI | [Checkbox](https://smooth-code.com/open-source/smooth-ui/docs/checkbox) | :x: | :heavy_check_mark: | :x: | :x: | `right` |\n| Zendesk Garden | [Checkbox](https://garden.zendesk.com/components/checkbox) | :x: | :heavy_check_mark: | :heavy_check_mark: | :x: | `right` |\n\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n## DatePicker\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\nUsers select a date or date range using a date picker.\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n#### Criteria\n\n- `Clearable`: Has a prop that allows the user to easily clear the date selection.\n- `Custom Locale`: A developer can specify a custom locale with a prop.\n- `Min/Max`: Allows a devloper to easily set a minimum and maximum date.\n- `Modes`: Allows users to quickly select from different magnituteds of lengths of time.\n- `Presets`: A super simple way exists to provide the user with preset dates (e.g. \"Today\", \"Last Week\", , \"Past 3 years\").\n- `Range`: An out-of-the-box solution exists for allowing the user to select date ranges.\n- `Time`: Users are able to input times.\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n| Framework | Name | Clearable | Custom Locale | Min/Max | Modes | Presets | Range | Time |\n| --- | --- | --- | --- | --- | --- | --- | --- | --- |\n| Ant Design | [DatePicker](https://ant.design/components/date-picker) | :heavy_check_mark: | :heavy_check_mark: | :x: | `day`, `month`, `quarter`, `week`, `year` | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |\n| Blueprint | [DatePicker](https://blueprintjs.com/docs/#datetime/daterangepicker) | :x: | :heavy_check_mark: | :heavy_check_mark: | `day`, `month`, `year` | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |\n| Carbon Design | [DatePicker](http://react.carbondesignsystem.com/?path=/story/components-datepicker--simple) | :x: | :x: | :heavy_check_mark: | `day`, `year` | :x: | :heavy_check_mark: | :heavy_check_mark: |\n| Elastic UI | [DatePicker](https://elastic.github.io/eui/#/forms/date-picker) | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | `day` | :x: | :heavy_check_mark: | :heavy_check_mark: |\n| Element | [DatePicker](https://element.eleme.io/#/en-US/component/date-picker) | :heavy_check_mark: | :x: | :heavy_check_mark: | `day`, `month`, `week`, `year` | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |\n| Fluent UI | [DatePicker](https://developer.microsoft.com/en-us/fluentui#/controls/web/datepicker) | :x: | :x: | :heavy_check_mark: | `day`, `month`, `year` | :x: | :heavy_check_mark: | :x: |\n| Gestalt | [DatePicker](https://gestalt.netlify.app/datepicker) | :x: | :heavy_check_mark: | :heavy_check_mark: | `day` | :x: | :heavy_check_mark: | :x: |\n| Grommet | [DateInput](https://v2.grommet.io/dateinput) | :x: | :x: | :x: | `day` | :x: | :x: | :x: |\n| MUI | [DatePicker](https://mui.com/x/react-date-pickers/date-picker/) | :x: | :x: | :x: | `day` | :x: | :x: | :heavy_check_mark: |\n| Quasar | [date](https://quasar.dev/vue-components/date) | :x: | :x: | :heavy_check_mark: | `day`, `month`, `year` | :x: | :heavy_check_mark: | :heavy_check_mark: |\n| React Toolbox | [DatePicker](http://react-toolbox.io/#/components/date_picker) | :x: | :heavy_check_mark: | :heavy_check_mark: | `day`, `month`, `year` | :x: | :x: | :x: |\n| Ring UI | [DatePicker](https://jetbrains.github.io/ring-ui/master/index.html?path=/docs/components-date-picker--clearable) | :heavy_check_mark: | :x: | :heavy_check_mark: | `day`, `month`, `year` | :x: | :heavy_check_mark: | :heavy_check_mark: |\n| Zendesk Garden | [DatePicker](https://garden.zendesk.com/components/date-picker) | :x: | :heavy_check_mark: | :heavy_check_mark: | `day` | :x: | :heavy_check_mark: | :x: |\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n\u003e [Atlaskit](https://bitbucket.org/atlassian/atlaskit-mk-2), [Chakra UI](https://github.com/chakra-ui/chakra-ui), [Elemental UI](https://github.com/elementalui/elemental), [Evergreen](https://github.com/segmentio/evergreen), [Onsen UI](https://github.com/OnsenUI/OnsenUI), [Orbit](https://github.com/kiwicom/orbit), [Prime React](https://github.com/primefaces/primereact), [React Bootstrap](https://github.com/react-bootstrap/react-bootstrap), [react-md](https://github.com/mlaursen/react-md), [Semantic UI](https://github.com/Semantic-Org/Semantic-UI), and [Smooth UI](https://github.com/smooth-code/smooth-ui) appear to be missing a DatePicker component. [Please file an issue](https://github.com/dimitropoulos/react-ui-roundup/issues/new) if one now exists.\n\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n## ErrorBoundary\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n[ErrorBoundaries](https://reactjs.org/docs/error-boundaries.html) are a React 16+ specific feature that uses the [componentDidCatch](https://reactjs.org/docs/react-component.html#componentdidcatch) API for handling uncaught errors without unmounting the whole React component tree.\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n#### Criteria\n\n- `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).\n- `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`.\n- `Wrapper JSX Fallback`: Has a prop that can be used to provide a custom ReactNode for fallback which receives the data of `componentDidCatch`.\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n| Framework | Name | Custom Text | Drop-In JSX Fallback | Wrapper JSX Fallback |\n| --- | --- | --- | --- | --- |\n| Ant Design | [Alert.ErrorBoundary](https://ant.design/components/alert/#components-alert-demo-error-boundary) | :heavy_check_mark: | :x: | :x: |\n| Carbon Design | [ErrorBoundary](http://react.carbondesignsystem.com/?path=/story/errorboundary--default) | :x: | :heavy_check_mark: | :x: |\n| Elastic UI | [ErrorBoundary](https://elastic.github.io/eui/#/utilities/error-boundary) | :x: | :x: | :x: |\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n\u003e [Atlaskit](https://bitbucket.org/atlassian/atlaskit-mk-2), [Blueprint](https://github.com/palantir/blueprint), [Chakra UI](https://github.com/chakra-ui/chakra-ui), [Element](https://github.com/ElemeFE/element), [Elemental UI](https://github.com/elementalui/elemental), [Evergreen](https://github.com/segmentio/evergreen), [Fluent UI](https://github.com/microsoft/fluentui), [Gestalt](https://github.com/pinterest/gestalt), [Grommet](https://github.com/grommet/grommet), [MUI](https://github.com/mui/material-ui), [Onsen UI](https://github.com/OnsenUI/OnsenUI), [Orbit](https://github.com/kiwicom/orbit), [Prime React](https://github.com/primefaces/primereact), [Quasar](https://github.com/quasarframework/quasar), [React Bootstrap](https://github.com/react-bootstrap/react-bootstrap), [React Toolbox](https://github.com/react-toolbox/react-toolbox), [react-md](https://github.com/mlaursen/react-md), [Ring UI](https://github.com/JetBrains/ring-ui), [Semantic UI](https://github.com/Semantic-Org/Semantic-UI), [Smooth UI](https://github.com/smooth-code/smooth-ui), and [Zendesk Garden](https://github.com/zendeskgarden/react-components) appear to be missing an ErrorBoundary component. [Please file an issue](https://github.com/dimitropoulos/react-ui-roundup/issues/new) if one now exists.\n\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n## Pagination\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\nPagination allows long lists to be divided into several pages.\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n#### Criteria\n\n- `Compact`: Has a mode that greatly conserves horizontal space, likely by omitting multiple page selectors.\n- `Edge #`: Allows configuring the number of items that will be shown at the beginning and end of the range.\n- `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).\n- `# of Pages`: Allows the number of page items shown to be configurable.\n- `Page Size`: Allows configuring the number of items that will be shown per page.\n- `Style`: Has an API the is oriented around pages (but disregards pages) or items (and figures out pages automatically).\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n| Framework | Name | # of Pages | Compact | Edge # | First/Last | Page Size | Style |\n| --- | --- | --- | --- | --- | --- | --- | --- |\n| Ant Design | [Pagination](https://ant.design/components/pagination) | :heavy_check_mark: | :heavy_check_mark: | :x: | :x: | :heavy_check_mark: | `items` |\n| Atlaskit | [Pagination](https://atlassian.design/components/pagination) | :heavy_check_mark: | :x: | :x: | :x: | :x: | `pages` |\n| Carbon Design | [PaginationNav](http://react.carbondesignsystem.com/?path=/story/components-paginationnav--default) | :heavy_check_mark: | :x: | :x: | :x: | :heavy_check_mark: | `items` |\n| Elastic UI | [Pagination](https://elastic.github.io/eui/#/navigation/pagination) | :x: | :heavy_check_mark: | :x: | :heavy_check_mark: | :x: | `pages` |\n| Element | [Pagination](https://element.eleme.io/#/en-US/component/pagination) | :heavy_check_mark: | :heavy_check_mark: | :x: | :x: | :heavy_check_mark: | `items` |\n| Evergreen | [Pagination](https://evergreen.segment.com/components/pagination) | :x: | :heavy_check_mark: | :x: | :x: | :x: | `pages` |\n| Grommet | [Pagination](https://v2.grommet.io/pagination) | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | `items` |\n| MUI | [Pagination](https://mui.com/material-ui//react-pagination) | :x: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :x: | `pages` |\n| Orbit | [Pagination](https://orbit.kiwi/components/navigation/pagination) | :heavy_check_mark: | :heavy_check_mark: | :x: | :x: | :x: | `pages` |\n| Prime React | [Paginator](https://primefaces.org/primereact/paginator) | :heavy_check_mark: | :heavy_check_mark: | :x: | :heavy_check_mark: | :heavy_check_mark: | `items`, `pages` |\n| Quasar | [pagination](https://quasar.dev/vue-components/pagination) | :heavy_check_mark: | :heavy_check_mark: | :x: | :heavy_check_mark: | :x: | `pages` |\n| React Bootstrap | [Pagination](https://react-bootstrap.github.io/components/pagination) | :x: | :heavy_check_mark: | :x: | :heavy_check_mark: | :x: | `pages` |\n| Ring UI | [Pager](https://jetbrains.github.io/ring-ui/master/index.html?path=/docs/components-pager--basic) | :heavy_check_mark: | :x: | :x: | :heavy_check_mark: | :heavy_check_mark: | `pages` |\n| Zendesk Garden | [Pagination](https://garden.zendesk.com/components/pagination) | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :x: | `pages` |\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n\u003e [Blueprint](https://github.com/palantir/blueprint), [Chakra UI](https://github.com/chakra-ui/chakra-ui), [Elemental UI](https://github.com/elementalui/elemental), [Fluent UI](https://github.com/microsoft/fluentui), [Gestalt](https://github.com/pinterest/gestalt), [Onsen UI](https://github.com/OnsenUI/OnsenUI), [React Toolbox](https://github.com/react-toolbox/react-toolbox), [react-md](https://github.com/mlaursen/react-md), [Semantic UI](https://github.com/Semantic-Org/Semantic-UI), and [Smooth UI](https://github.com/smooth-code/smooth-ui) appear to be missing a Pagination component. [Please file an issue](https://github.com/dimitropoulos/react-ui-roundup/issues/new) if one now exists.\n\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n## Select\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\nA Select allows a user to select a value from a series of options.  Much more advanced than the native HTML select.\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n#### Criteria\n\n- `Async`: Has support fo async-loaded lists (for example, a loading state).\n- `Disabled`: The whole select be disabled with a built-in prop.\n- `Disabled Options`: Individual options can be easily disabled with a prop.\n- `Filterable`: Filter the options of the select with keyboard input.\n- `Groupable`: Can group the options into sub sections within the options list.\n- `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).\n- `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.\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n| Framework | Name | Async | Disabled | Disabled Options | Filterable | Groupable | Icons | Virtual |\n| --- | --- | --- | --- | --- | --- | --- | --- | --- |\n| Ant Design | [Select](https://ant.design/components/select) | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | `end` | :heavy_check_mark: |\n| Atlaskit | [Select](https://atlassian.design/components/select) | :heavy_check_mark: | :heavy_check_mark: | :x: | :heavy_check_mark: | :heavy_check_mark: |  | :x: |\n| Blueprint | [Select](https://blueprintjs.com/docs/#select/select-component) | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |  | :heavy_check_mark: |\n| Carbon Design | [Select](http://react.carbondesignsystem.com/?path=/story/components-select--default) | :x: | :heavy_check_mark: | :heavy_check_mark: | :x: | :heavy_check_mark: |  | :x: |\n| Chakra UI | [Select](https://chakra-ui.com/docs/form/select) | :x: | :heavy_check_mark: | :heavy_check_mark: | :x: | :x: |  | :x: |\n| Elastic UI | [SuperSelect](https://elastic.github.io/eui/#/forms/super-select) | :heavy_check_mark: | :x: | :heavy_check_mark: | :x: | :x: | `composable` | :x: |\n| Element | [Select](https://element.eleme.io/#/en-US/component/select) | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |  | :x: |\n| Elemental UI | [Dropdown](http://elemental-ui.com/components/dropdown) | :x: | :x: | :x: | :x: | :heavy_check_mark: |  | :x: |\n| Evergreen | [SelectMenu](https://evergreen.segment.com/components/select-menu) | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | `start` | :heavy_check_mark: |\n| Fluent UI | [Dropdown](https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown) | :x: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | `composable` | :x: |\n| Gestalt | [SelectList](https://gestalt.netlify.app/selectlist) | :x: | :heavy_check_mark: | :heavy_check_mark: | :x: | :x: |  | :x: |\n| Grommet | [Select](https://v2.grommet.io/select) | :x: | :heavy_check_mark: | :heavy_check_mark: | :x: | :x: |  | :x: |\n| MUI | [Select](https://mui.com/material-ui//react-select) | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :x: | :heavy_check_mark: | `composable` | :x: |\n| Onsen UI | [Select](https://onsen.io/v2/api/react/Select.html) | :x: | :heavy_check_mark: | :heavy_check_mark: | :x: | :x: |  | :x: |\n| Orbit | [Select](https://orbit.kiwi/components/input/select) | :x: | :heavy_check_mark: | :heavy_check_mark: | :x: | :x: | `end`, `start` | :x: |\n| Prime React | [Dropdown](https://primefaces.org/primereact/dropdown) | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | `composable` | :heavy_check_mark: |\n| Quasar | [select](https://quasar.dev/vue-components/select) | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :x: |  | :heavy_check_mark: |\n| React Bootstrap | [Dropdown](https://react-bootstrap.github.io/components/dropdowns) | :x: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |  | :x: |\n| React Toolbox | [Dropdown](http://react-toolbox.io/#/components/dropdown) | :x: | :heavy_check_mark: | :heavy_check_mark: | :x: | :x: |  | :x: |\n| react-md | [Dropdown](https://react-md.dev/packages/dropdown/demos) | :x: | :x: | :x: | :x: | :x: | `end`, `start` | :heavy_check_mark: |\n| Ring UI | [Select](https://jetbrains.github.io/ring-ui/master/index.html?path=/docs/components-select--with-a-filter-and-tags) | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :x: |  | :x: |\n| Semantic UI | [Dropdown](https://semantic-ui.com/modules/dropdown.html) | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :x: | `composable` | :x: |\n| Smooth UI | [Select](https://smooth-code.com/open-source/smooth-ui/docs/select) | :x: | :heavy_check_mark: | :heavy_check_mark: | :x: | :x: |  | :x: |\n| Zendesk Garden | [Select](https://garden.zendesk.com/components/select) | :x: | :heavy_check_mark: | :heavy_check_mark: | :x: | :x: | `start` | :x: |\n\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n## Stepper\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\nNavigation that guides users through the steps of a task.\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n#### Criteria\n\n- `Can Be Vertical`: The steps can be stacked vertically.\n- `Clickable`: A user can click on the step itself to navigate.\n- `Step Description`: A step can have a subtext with a description.\n- `Step Error`: A step with an error can be easily identified to the user.\n- `Step Icon`: The steps have a prop whereby they can be given custom icons.\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n| Framework | Name | Can Be Vertical | Clickable | Step Description | Step Error | Step Icon |\n| --- | --- | --- | --- | --- | --- | --- |\n| Ant Design | [Steps](https://ant.design/components/steps) | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |\n| Atlaskit | [ProgressTracker](https://atlassian.design/components/progress-tracker) | :x: | :heavy_check_mark: | :x: | :x: | :x: |\n| Carbon Design | [ProgressIndicator](http://react.carbondesignsystem.com/?path=/story/progressindicator--default) | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :x: |\n| Elastic UI | [Steps](https://elastic.github.io/eui/#/navigation/steps) | :heavy_check_mark: | :x: | :x: | :x: | :x: |\n| Element | [Steps](https://element.eleme.io/#/en-US/component/steps) | :heavy_check_mark: | :x: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |\n| MUI | [Stepper](https://mui.com/material-ui//react-stepper) | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |\n| Prime React | [Steps](https://primefaces.org/primereact/steps) | :x: | :heavy_check_mark: | :x: | :x: | :x: |\n| Quasar | [stepper](https://quasar.dev/vue-components/stepper) | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |\n| Semantic UI | [Steps](https://semantic-ui.com/elements/step.html) | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :x: | :heavy_check_mark: |\n| Zendesk Garden | [Stepper](https://garden.zendesk.com/components/stepper) | :x: | :x: | :x: | :x: | :x: |\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n\u003e [Blueprint](https://github.com/palantir/blueprint), [Chakra UI](https://github.com/chakra-ui/chakra-ui), [Elemental UI](https://github.com/elementalui/elemental), [Evergreen](https://github.com/segmentio/evergreen), [Fluent UI](https://github.com/microsoft/fluentui), [Gestalt](https://github.com/pinterest/gestalt), [Grommet](https://github.com/grommet/grommet), [Onsen UI](https://github.com/OnsenUI/OnsenUI), [Orbit](https://github.com/kiwicom/orbit), [React Bootstrap](https://github.com/react-bootstrap/react-bootstrap), [React Toolbox](https://github.com/react-toolbox/react-toolbox), [react-md](https://github.com/mlaursen/react-md), [Ring UI](https://github.com/JetBrains/ring-ui), and [Smooth UI](https://github.com/smooth-code/smooth-ui) appear to be missing a Stepper component. [Please file an issue](https://github.com/dimitropoulos/react-ui-roundup/issues/new) if one now exists.\n\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n## Switch\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\nUsed to toggle between two states: on and off.\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n#### Criteria\n\n- `Disabled`: The switch has a `disabled` state, indicating that the user cannot interact with it.\n- `Indeterminate`: The switch has an ability to display an indeterminate state.\n- `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).\n- `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`).\n- `Lable Placement`: Where a label can be attached to the switch.\n- `Loading`: The switch has a `loading` state that indicates a pending state of a switch action.\n- `Sizes`: The lable has native, pre-configured size options.\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n| Framework | Name | Disabled | Indeterminate | Internal Icons | Internal Text | Lable Placement | Loading | Sizes |\n| --- | --- | --- | --- | --- | --- | --- | --- | --- |\n| Ant Design | [Switch](https://ant.design/components/switch) | :heavy_check_mark: | :x: | :heavy_check_mark: | :heavy_check_mark: |  | :heavy_check_mark: | `default`, `small` |\n| Atlaskit | [Toggle](https://atlassian.design/components/toggle) | :heavy_check_mark: | :x: | :x: | :x: |  | :x: | `large`, `regular` |\n| Blueprint | [Switch](https://blueprintjs.com/docs/#core/components/switch) | :heavy_check_mark: | :x: | :x: | :heavy_check_mark: | `left`, `right` | :x: | `default`, `large` |\n| Carbon Design | [Switch](http://react.carbondesignsystem.com/?path=/story/toggle--toggled) | :heavy_check_mark: | :x: | :x: | :x: | `right` | :x: | `default`, `small` |\n| Chakra UI | [Switch](https://chakra-ui.com/docs/form/switch) | :heavy_check_mark: | :x: | :x: | :x: | `left`, `right` | :x: | `lg`, `md`, `sm` |\n| Elastic UI | [Switch](https://elastic.github.io/eui/#/forms/form-controls) | :heavy_check_mark: | :x: | :x: | :x: | `right` | :x: | `compressed`, `default` |\n| Element | [Switch](https://element.eleme.io/#/en-US/component/switch) | :heavy_check_mark: | :x: | :x: | :x: | `left`, `right` | :x: |  |\n| Evergreen | [Switch](https://evergreen.segment.com/components/switch) | :heavy_check_mark: | :x: | :x: | :x: |  | :x: | `integers` |\n| Fluent UI | [Toggle](https://developer.microsoft.com/en-us/fluentui#/controls/web/toggle) | :heavy_check_mark: | :x: | :x: | :x: | `left`, `right` | :x: |  |\n| Gestalt | [Switch](https://gestalt.netlify.app/switch) | :heavy_check_mark: | :x: | :x: | :x: |  | :x: |  |\n| Grommet | [CheckBox](https://v2.grommet.io/checkbox) | :heavy_check_mark: | :x: | :x: | :x: | `left`, `right` | :x: |  |\n| MUI | [Switch](https://mui.com/material-ui//react-switch) | :heavy_check_mark: | :x: | :x: | :x: | `above`, `below`, `left`, `right` | :x: | `default`, `small` |\n| Onsen UI | [Switch](https://onsen.io/v2/api/react/Switch.html) | :heavy_check_mark: | :x: | :x: | :x: |  | :x: |  |\n| Prime React | [InputSwitch](https://primefaces.org/primereact/inputswitch) | :heavy_check_mark: | :x: | :x: | :x: |  | :x: |  |\n| Quasar | [toggle](https://quasar.dev/vue-components/toggle) | :heavy_check_mark: | :x: | :heavy_check_mark: | :x: | `left`, `right` | :x: | `custom`, `lg`, `md`, `sm`, `xl`, `xs` |\n| React Bootstrap | [Form.Check](https://react-bootstrap.github.io/components/forms/#forms-custom-switch) | :heavy_check_mark: | :x: | :x: | :x: | `right` | :x: |  |\n| React Toolbox | [Switch](http://react-toolbox.io/#/components/switch) | :heavy_check_mark: | :x: | :x: | :x: | `right` | :x: |  |\n| Ring UI | [Toggle](https://jetbrains.github.io/ring-ui/master/index.html?path=/docs/components-toggle--basic) | :heavy_check_mark: | :x: | :x: | :x: | `left`, `right` | :x: |  |\n| Smooth UI | [Switch](https://smooth-code.com/open-source/smooth-ui/docs/switch) | :heavy_check_mark: | :x: | :x: | :heavy_check_mark: |  | :x: | `base`, `lg`, `sm`, `xl`, `xs` |\n| Zendesk Garden | [Toggle](https://garden.zendesk.com/components/toggle) | :x: | :x: | :x: | :x: | `above`, `below` | :x: |  |\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n\u003e [Elemental UI](https://github.com/elementalui/elemental), [Orbit](https://github.com/kiwicom/orbit), [react-md](https://github.com/mlaursen/react-md), and [Semantic UI](https://github.com/Semantic-Org/Semantic-UI) appear to be missing a Switch component. [Please file an issue](https://github.com/dimitropoulos/react-ui-roundup/issues/new) if one now exists.\n\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n## Tabs\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\nUsers switch between different views with tabs.\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n#### Criteria\n\n- `Can Be Vertical`: The tabs can be stacked vertically.\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n| Framework | Name | Can Be Vertical |\n| --- | --- | --- |\n| Ant Design | [Tabs](https://ant.design/components/tabs) | :heavy_check_mark: |\n| Atlaskit | [Tabs](https://atlassian.design/components/tabs) | :x: |\n| Blueprint | [Tabs](https://blueprintjs.com/docs/#core/components/tabs) | :heavy_check_mark: |\n| Carbon Design | [Tabs](http://react.carbondesignsystem.com/?path=/story/tabs--default) | :x: |\n| Chakra UI | [Tabs](https://chakra-ui.com/docs/disclosure/tabs) | :heavy_check_mark: |\n| Elastic UI | [Tabs](https://elastic.github.io/eui/#/navigation/tabs) | :x: |\n| Element | [Tabs](https://element.eleme.io/#/en-US/component/tabs) | :heavy_check_mark: |\n| Evergreen | [Tablist](https://evergreen.segment.com/components/tabs) | :heavy_check_mark: |\n| Fluent UI | [Pivot](https://developer.microsoft.com/en-us/fluentui#/controls/web/pivot) | :x: |\n| Gestalt | [Tabs](https://gestalt.netlify.app/tabs) | :x: |\n| Grommet | [Tabs](https://v2.grommet.io/tabs) | :x: |\n| MUI | [Tabs](https://mui.com/material-ui//react-tabs) | :heavy_check_mark: |\n| Onsen UI | [Tabbar](https://onsen.io/v2/api/react/Tabbar.html) | :x: |\n| Prime React | [TabView](https://primefaces.org/primereact/tabview) | :x: |\n| Quasar | [tabs](https://quasar.dev/vue-components/tabs) | :heavy_check_mark: |\n| React Bootstrap | [Tabs](https://react-bootstrap.github.io/components/tabs) | :x: |\n| React Toolbox | [Tabs](http://react-toolbox.io/#/components/tabs) | :x: |\n| react-md | [Tabs](https://react-md.dev/packages/tabs/demos) | :x: |\n| Ring UI | [Tabs](https://jetbrains.github.io/ring-ui/master/index.html?path=/docs/components-tabs--basic) | :x: |\n| Semantic UI | [Tabs](https://semantic-ui.com/modules/tab.html) | :x: |\n| Zendesk Garden | [Tabs](https://garden.zendesk.com/components/tabs) | :heavy_check_mark: |\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n\u003e [Elemental UI](https://github.com/elementalui/elemental), [Orbit](https://github.com/kiwicom/orbit), and [Smooth UI](https://github.com/smooth-code/smooth-ui) appear to be missing a Tabs component. [Please file an issue](https://github.com/dimitropoulos/react-ui-roundup/issues/new) if one now exists.\n\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\n# How to Make a Change\n\n\u003c!--\n********************************************************************************\nTHIS FILE ENTIRE FILE IS AUTOGENERATED!!!\nPLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :)\n********************************************************************************\n--\u003e\nThe 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`](https://github.com/dimitropoulos/react-ui-roundup/tree/master/frameworks).  To update any given data point, simply make a change to one of those files and run `yarn generate`.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdimitropoulos%2Freact-ui-roundup","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdimitropoulos%2Freact-ui-roundup","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdimitropoulos%2Freact-ui-roundup/lists"}