React UI Roundup

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

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

About

I decided to make this project while contributing an Alert component to material-ui. While thinking about that component, it was HUGELY helpful to review other implementations from everything from feature set, DOM structure, CSS usage, theming integration, prop naming, and more. I wanted something where I could stand back at a distance and look at many high-quality implementations of a similar component while I researched - so I made this project.

An even more better version of this exact document is available at react-ui-roundup.dimitrimitropoulos.com. It has special "Open All" buttons that allow you to open every link in a table with one click! Also, the Framework Statistics section on the website is always up to date since it pulls the data in realtime when you load the page.

Frameworks

Framework Statistics

all of the above statistics were last updated Wed, 12 Oct 2022 18:16:19 GMT. For real-time data, see the website.

Framework Features

Criteria

• Native Dark Mode: The project is made with dark-mode styling in mind. An out-of-the-box dark mode is either used on the docs site itself or well documented and easy to configure.
• Design Kits: Ready-made resources exist for designers such as Sketch or Figma download packs.
• RTL Support: Explicit right-to-Left support for use in apps with languages like Arabic, Hebrew, or Persian.
• Themer: A user-interactable theming area where designers and developers can play around with look and feel without needing to do any programming.
• Native TypeScript: Is either written in TypeScript (ideally) or has TypeScript definitions directly in the project. DefinitelyTyped does not qualify.

Components

Alert

Alerts are used to show an important message to users.

Criteria

• Closable: The alert has an "out of the box" way to dismiss, usually with an onClose prop.
• Types: The alert has ready-made variations.

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

AppBar

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

Criteria

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

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

Avatar

Avatars can be used to represent people or objects.

Criteria

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

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

AvatarGroup

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

Criteria

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

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

Button

Users trigger actions by clicking on buttons.

Criteria

• Disabled: A disabled prop exists for use in situations where the user cannot interact with the button.
• Groupable: A ButtonGroup component exists in the library, or other such pre-made methods for making button groups.
• Icon: An icon can be included either at the left or right of the text, or button can be used with just an icon and no text (notated as only).
• Loading: The button has a pre-made loading state for asynchronous events.
• Sizes: The button can be easily sized between different (and consistent) major sizes.

Checkbox

Users toggle between checked, unchecked (or indeterminate) values with checkboxes.

Criteria

• Custom Icon: A custom icon can be provided in place of the checkbox itself via a prop or a child.
• Disabled: The checkbox has a disabled state, indicating the user cannot interact with it.
• Indeterminate: The checkbox has an indeterminate state.
• Invalid: The checkbox has an invalid or error state.
• Label Placement: The text can be positioned at different places around the checkbox.

DatePicker

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

Criteria

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

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

ErrorBoundary

ErrorBoundaries are a React 16+ specific feature that uses the componentDidCatch API for handling uncaught errors without unmounting the whole React component tree.

Criteria

• Custom Text: Has a prop or props that can be used to provide a custom title and/or description (as a string, not a ReactNode).
• Drop-In JSX Fallback: Has a prop that can be used to provide a custom ReactNode fallback that does not receive the date of componentDidCatch.
• Wrapper JSX Fallback: Has a prop that can be used to provide a custom ReactNode for fallback which receives the data of componentDidCatch.

Atlaskit, Blueprint, Chakra UI, Element, Elemental UI, Evergreen, Fluent UI, Gestalt, Grommet, MUI, Onsen UI, Orbit, Prime React, Quasar, React Bootstrap, React Toolbox, react-md, Ring UI, Semantic UI, Smooth UI, and Zendesk Garden appear to be missing an ErrorBoundary component. Please file an issue if one now exists.

Pagination

Pagination allows long lists to be divided into several pages.

Criteria

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

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

Select

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

Criteria

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

Stepper

Navigation that guides users through the steps of a task.

Criteria

• Can Be Vertical: The steps can be stacked vertically.
• Clickable: A user can click on the step itself to navigate.
• Step Description: A step can have a subtext with a description.
• Step Error: A step with an error can be easily identified to the user.
• Step Icon: The steps have a prop whereby they can be given custom icons.

Blueprint, Chakra UI, Elemental UI, Evergreen, Fluent UI, Gestalt, Grommet, Onsen UI, Orbit, React Bootstrap, React Toolbox, react-md, Ring UI, and Smooth UI appear to be missing a Stepper component. Please file an issue if one now exists.

Switch

Used to toggle between two states: on and off.

Criteria

• Disabled: The switch has a disabled state, indicating that the user cannot interact with it.
• Indeterminate: The switch has an ability to display an indeterminate state.
• Internal Icons: The switch has a prop (or child) to include custom icons within the space of the switch (e.g. a checkmark and an x icon).
• Internal Text: The switch has a prop (or child) to include custom text within the space of the switch (e.g. the text on and off).
• Lable Placement: Where a label can be attached to the switch.
• Loading: The switch has a loading state that indicates a pending state of a switch action.
• Sizes: The lable has native, pre-configured size options.

Elemental UI, Orbit, react-md, and Semantic UI appear to be missing a Switch component. Please file an issue if one now exists.

Tabs

Users switch between different views with tabs.

Criteria

• Can Be Vertical: The tabs can be stacked vertically.

Elemental UI, Orbit, and Smooth UI appear to be missing a Tabs component. Please file an issue if one now exists.

How to Make a Change

The README.md and website are both autogenerated from the same source input files. For convenience, there is exactly one file for each project that has all the information for that project, located in the frameworks directory. To update any given data point, simply make a change to one of those files and run yarn generate.