React UI Roundup

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

• About
• Framework Statistics
• Framework Features
• Components
  • Alert
  • Avatar
  • AvatarGroup
  • Button
  • Checkbox
  • ErrorBoundary
  • 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 Fri, 05 Mar 2021 13:12:33 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.

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

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

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, Gestalt, Grommet, Material UI, Onsen UI, Orbit, Prime React, Quasar, React Bootstrap, React Toolbox, react-md, Ring UI, Semantic UI, Smooth UI, UI Fabric, and Zendesk Garden appear to be missing an ErrorBoundary component. Please file an issue if one now exists.

Stepper

Navigation that guides users through the steps of a task.

Criteria

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

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

Switch

Used to toggle between two states: on and off.

Criteria

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

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.