A one-stop-shop for comparing the features of all the best React frameworks

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!

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

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

Frameworks

Framework Statistics

Name Homepage Repository Stars Forks Issues License
Ant Design ant.design ant-design/ant-design 63,025 23,929 494 MIT
Atlaskit atlassian.design bitbucket.org/atlassian/atlaskit-mk-2
Blueprint blueprintjs.com palantir/blueprint 16,653 1,716 526 Apache 2.0
Carbon Design react.carbondesignsystem.com carbon-design-system/carbon 3,429 764 410 Apache 2.0
Chakra UI chakra-ui.com chakra-ui/chakra-ui 10,165 677 85 MIT
Elastic UI elastic.github.io/eui elastic/eui 2,194 384 359 Apache 2.0
Element element.eleme.io ElemeFE/element 47,064 11,312 2,016 MIT
Elemental UI elemental-ui.com elementalui/elemental 4,318 248 50 MIT
Evergreen evergreen.segment.com segmentio/evergreen 10,009 569 76 MIT
Gestalt gestalt.netlify.app pinterest/gestalt 3,615 261 12 Apache 2.0
Grommet v2.grommet.io grommet/grommet 6,594 790 233 Apache 2.0
Material UI material-ui.com mui-org/material-ui 60,626 17,805 460 MIT
Onsen UI onsen.io OnsenUI/OnsenUI 8,072 918 141 Apache 2.0
Orbit orbit.kiwi kiwicom/orbit 697 66 55 MIT
Prime React primefaces.org/primereact primefaces/primereact 1,508 370 211 MIT
Quasar quasar.dev quasarframework/quasar 16,056 1,864 225 MIT
React Bootstrap react-bootstrap.github.io react-bootstrap/react-bootstrap 18,205 2,910 96 MIT
React Toolbox react-toolbox.io react-toolbox/react-toolbox 8,630 1,050 262 MIT
react-md react-md.mlaursen.com mlaursen/react-md 2,118 308 41 MIT
Ring UI jetbrains.github.io/ring-ui JetBrains/ring-ui 2,484 131 10 Apache 2.0
Semantic UI semantic-ui.com Semantic-Org/Semantic-UI 48,410 5,081 1,016 MIT
Smooth UI smooth-code.com/open-source/smooth-ui smooth-code/smooth-ui 1,530 111 10 MIT
UI Fabric developer.microsoft.com/en-us/fluentui microsoft/fluentui 9,307 1,685 953 Other
Zendesk Garden garden.zendesk.com zendeskgarden/react-components 787 51 10 Apache 2.0

all of the above statistics were last updated Thu, 03 Sep 2020 00:36:11 GMT. For real-time data, see the website.

Framework Features

Criteria
  • Native Dark Mode: The project is made with dark-mode styling in mind. An out-of-the-box dark mode is either used on the docs site itself or well documented and easy to configure.
  • Design Kits: Ready-made resources exist for designers such as Sketch or Figma download packs.
  • RTL Support: Explicit right-to-Left support for use in apps with languages like Arabic, Hebrew, or Persian.
  • Themer: A user-interactable theming area where designers and developers can play around with look and feel without needing to do any programming.
  • Native TypeScript: Is either written in TypeScript (ideally) or has TypeScript definitions directly in the project. DefinitelyTyped does not qualify.
Name Native Dark Mode Design Kits RTL Support Themer Native TypeScript
Ant Design ✔️ Figma, Sketch ✔️ Link ✔️
Atlaskit Sketch
Blueprint ✔️ Sketch ✔️ ✔️
Carbon Design ✔️ Sketch ✔️ Link
Chakra UI ✔️
Elastic UI ✔️ Sketch ✔️
Element Axure, Sketch Link
Elemental UI
Evergreen Sketch
Gestalt ✔️
Grommet Custom, Framer X, Sketch ✔️ Link ✔️
Material UI ✔️ Figma, Sketch ✔️ Link ✔️
Onsen UI ✔️ ✔️
Orbit Abstract, Sketch ✔️ Link
Prime React ✔️
Quasar ✔️ ✔️ Link ✔️
React Bootstrap ✔️
React Toolbox ✔️
react-md ✔️ ✔️
Ring UI
Semantic UI Sketch ✔️
Smooth UI ✔️
UI Fabric ✔️ Figma, Sketch ✔️
Zendesk Garden ✔️ ✔️

Components

Alert

Alerts are used to show an important message to users.

Criteria
  • Closable: The alert has an “out of the box” way to dismiss, usually with an onClose prop.
  • Types: The alert has ready-made variations.
Framework Name Closable Types
Ant Design Alert ✔️ error, info, success, warning
Atlaskit SectionMessage change, confirmation, error, info, warning
Atlaskit Flag change, confirmation, error, info, warning
Chakra UI Alert ✔️ error, info, success, warning
Element Alert ✔️ error, info, success, warning
Elemental UI Alert danger, info, primary, success, warning
Evergreen Alert ✔️ danger, none, success, warning
Material UI Alert ✔️ error, info, success, warning
Orbit Alert ✔️ critical, info, success, warning
Quasar banner
React Bootstrap Alert ✔️ danger, dark, info, light, primary, secondary, success, warning
Ring UI Alert ✔️ error, loading, message, success, warning
Smooth UI Alert danger, dark, info, light, primary, secondary, success, warning
UI Fabric MessageBar ✔️ blocked, error, info, remove, severeWarning, success, warning
Zendesk Garden Notification ✔️ error, info, success, warning

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

Button

Users trigger actions by clicking on buttons.

Criteria
  • Disabled: A disabled prop exists for use in situations where the user cannot interact with the button.
  • Groupable: A ButtonGroup component exists in the library, or other such pre-made methods for making button groups.
  • Icon: An icon can be included either at the left or right of the text, or button can be used with just an icon and no text (notated as only).
  • Loading: The button has a pre-made loading state for asynchronous events.
  • Sizes: The button can be easily sized between different (and consistent) major sizes.
Framework Name Disabled Groupable Icon Loading Sizes
Ant Design Button ✔️ ✔️ left, only, right ✔️ default, large, small
Atlaskit Button ✔️ ✔️ left, right ✔️
Blueprint Button ✔️ ✔️ left, only, right ✔️ default, large
Carbon Design Button ✔️ ✔️ only, right ✔️ default, field, small
Chakra UI Button ✔️ left, only, right lg, md, sm, xs
Elastic UI Button ✔️ ✔️ left, only, right ✔️ m, sm, xs
Element Button ✔️ ✔️ left, only, right ✔️ default, medium, mini, small
Elemental UI Button ✔️ default, extra small, large, small
Evergreen Button ✔️ ✔️ left, only, right ✔️ arbitrary pixel sizes
Gestalt Button ✔️ only lg, md, sm
Grommet Button ✔️ left, only, right
Material UI Button ✔️ ✔️ left, only, right large, medium, small
Onsen UI Button ✔️ default, large
Orbit Button ✔️ ✔️ left, only, right ✔️ large, normal, small
Prime React Button left, only, right
Quasar btn ✔️ ✔️ left, only, right ✔️ custom, lg, md, sm, xs
React Bootstrap Button ✔️ ✔️ lg, sm
React Toolbox Button ✔️ left, only
react-md Button ✔️ left, only, right
Ring UI Button ✔️ ✔️ left, only ✔️ default, large, small
Semantic UI Button ✔️ ✔️ left, only, right ✔️ big, huge, large, massive, medium, mini, small, tiny
Smooth UI Button ✔️ base, lg, sm, xl, xs
UI Fabric Button ✔️
Zendesk Garden Button ✔️ ✔️ only default, large, small

Checkbox

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

Criteria
  • Custom Icon: A custom icon can be provided in place of the checkbox itself via a prop or a child.
  • Disabled: The checkbox has a disabled state, indicating the user cannot interact with it
  • Indeterminate: The checkbox has an indeterminate state.
  • Invalid: The checkbox has an invalid or error state.
  • Label Placement: The text can be positioned at different places around the checkbox.
Framework Name Custom Icon Disabled Indeterminate Invalid Label Placement
Ant Design Checkbox ✔️ ✔️ right
Atlaskit Checkbox ✔️ ✔️ ✔️ right
Blueprint Checkbox ✔️ left, right
Carbon Design Checkbox ✔️ ✔️ right
Chakra UI Checkbox ✔️ ✔️ ✔️ right
Elastic UI Checkbox ✔️ ✔️ right
Element Checkbox ✔️ ✔️ right
Elemental UI Checkbox right
Evergreen Checkbox ✔️ ✔️ ✔️ right
Gestalt Checkbox ✔️ ✔️ ✔️ right
Grommet CheckBox ✔️ ✔️ right
Material UI Checkbox ✔️ ✔️ ✔️ above, below, left, right
Onsen UI Checkbox ✔️ ✔️ ✔️ right
Orbit Checkbox ✔️ ✔️ right
Prime React Checkbox ✔️ right
Quasar checkbox ✔️ ✔️ left, right
React Bootstrap Form.Check ✔️
React Toolbox Checkbox ✔️ right
react-md Checkbox ✔️ ✔️ right
Ring UI Checkbox ✔️ right
Semantic UI Checkbox ✔️ ✔️ right
Smooth UI Checkbox ✔️ right
UI Fabric Checkbox ✔️ ✔️ left, right
Zendesk Garden Checkbox ✔️ ✔️ right

ErrorBoundary

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

Criteria
  • Custom Text: Has a prop or props that can be used to provide a custom title and/or description (as a string, not a ReactNode).
  • Drop-In JSX Fallback: Has a prop that can be used to provide a custom ReactNode fallback that does not receive the date of componentDidCatch.
  • Wrapper JSX Fallback: Has a prop that can be used to provide a custom ReactNode for fallback which receives the data of componentDidCatch.
Framework Name Custom Text Drop-In JSX Fallback Wrapper JSX Fallback
Ant Design Alert.ErrorBoundary ✔️
Carbon Design ErrorBoundary ✔️
Elastic UI ErrorBoundary

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.
Framework Name Can Be Vertical Clickable Step Description Step Error Step Icon
Ant Design Steps ✔️ ✔️ ✔️ ✔️ ✔️
Atlaskit ProgressTracker ✔️
Carbon Design ProgressIndicator ✔️ ✔️ ✔️ ✔️
Elastic UI Steps ✔️
Element Steps ✔️ ✔️ ✔️ ✔️
Material UI Stepper ✔️ ✔️ ✔️ ✔️ ✔️
Prime React Steps ✔️
Quasar Stepper ✔️ ✔️ ✔️ ✔️ ✔️
Semantic UI Steps ✔️ ✔️ ✔️ ✔️
Zendesk Garden Stepper

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.
Framework Name Disabled Indeterminate Internal Icons Internal Text Lable Placement Loading Sizes
Ant Design Switch ✔️ ✔️ ✔️ ✔️ default, small
Atlaskit Toggle ✔️ large, regular
Blueprint Switch ✔️ ✔️ left, right default, large
Carbon Design Switch ✔️ right default, small
Chakra UI Switch ✔️ left, right lg, md, sm
Elastic UI Switch ✔️ right compressed, default
Element Switch ✔️ left, right
Evergreen Switch ✔️ integers
Gestalt Switch ✔️
Grommet CheckBox ✔️ left, right
Material UI Switch ✔️ above, below, left, right default, small
Onsen UI Switch ✔️
Prime React InputSwitch ✔️
Quasar toggle ✔️ ✔️ left, right custom, lg, md, sm, xl, xs
React Bootstrap Form.Check ✔️ right
React Toolbox Switch ✔️ right
Ring UI Toggle ✔️ left, right
Smooth UI Switch ✔️ ✔️ base, lg, sm, xl, xs
UI Fabric Toggle ✔️ left, right
Zendesk Garden Toggle above, below

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

Tabs

Users switch between different views with tabs.

Criteria
  • Can Be Vertical: The tabs can be stacked vertically.
Framework Name Can Be Vertical
Ant Design Tabs ✔️
Atlaskit Tabs
Blueprint Tabs ✔️
Carbon Design Tabs
Chakra UI Tabs ✔️
Elastic UI Tabs
Element Tabs ✔️
Evergreen Tablist ✔️
Gestalt Tabs
Grommet Tabs
Material UI Tabs ✔️
Onsen UI Tabbar
Prime React TabView
Quasar tabs ✔️
React Bootstrap Tabs
React Toolbox Tabs
react-md Tabs
Ring UI Tabs
Semantic UI Tabs
UI Fabric Pivot
Zendesk Garden Tabs ✔️

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.

Download Details:

Author: dimitropoulos

Demo: https://react-ui-roundup.dimitrimitropoulos.com/

Source Code: https://github.com/dimitropoulos/react-ui-roundup

#reactjs #react #javascript

What is GEEK

Buddha Community

A one-stop-shop for comparing the features of all the best React frameworks
Autumn  Blick

Autumn Blick

1598839687

How native is React Native? | React Native vs Native App Development

If you are undertaking a mobile app development for your start-up or enterprise, you are likely wondering whether to use React Native. As a popular development framework, React Native helps you to develop near-native mobile apps. However, you are probably also wondering how close you can get to a native app by using React Native. How native is React Native?

In the article, we discuss the similarities between native mobile development and development using React Native. We also touch upon where they differ and how to bridge the gaps. Read on.

A brief introduction to React Native

Let’s briefly set the context first. We will briefly touch upon what React Native is and how it differs from earlier hybrid frameworks.

React Native is a popular JavaScript framework that Facebook has created. You can use this open-source framework to code natively rendering Android and iOS mobile apps. You can use it to develop web apps too.

Facebook has developed React Native based on React, its JavaScript library. The first release of React Native came in March 2015. At the time of writing this article, the latest stable release of React Native is 0.62.0, and it was released in March 2020.

Although relatively new, React Native has acquired a high degree of popularity. The “Stack Overflow Developer Survey 2019” report identifies it as the 8th most loved framework. Facebook, Walmart, and Bloomberg are some of the top companies that use React Native.

The popularity of React Native comes from its advantages. Some of its advantages are as follows:

  • Performance: It delivers optimal performance.
  • Cross-platform development: You can develop both Android and iOS apps with it. The reuse of code expedites development and reduces costs.
  • UI design: React Native enables you to design simple and responsive UI for your mobile app.
  • 3rd party plugins: This framework supports 3rd party plugins.
  • Developer community: A vibrant community of developers support React Native.

Why React Native is fundamentally different from earlier hybrid frameworks

Are you wondering whether React Native is just another of those hybrid frameworks like Ionic or Cordova? It’s not! React Native is fundamentally different from these earlier hybrid frameworks.

React Native is very close to native. Consider the following aspects as described on the React Native website:

  • Access to many native platforms features: The primitives of React Native render to native platform UI. This means that your React Native app will use many native platform APIs as native apps would do.
  • Near-native user experience: React Native provides several native components, and these are platform agnostic.
  • The ease of accessing native APIs: React Native uses a declarative UI paradigm. This enables React Native to interact easily with native platform APIs since React Native wraps existing native code.

Due to these factors, React Native offers many more advantages compared to those earlier hybrid frameworks. We now review them.

#android app #frontend #ios app #mobile app development #benefits of react native #is react native good for mobile app development #native vs #pros and cons of react native #react mobile development #react native development #react native experience #react native framework #react native ios vs android #react native pros and cons #react native vs android #react native vs native #react native vs native performance #react vs native #why react native #why use react native

Siphiwe  Nair

Siphiwe Nair

1625133780

SingleStore: The One Stop Shop For Everything Data

  • SingleStore works toward helping businesses embrace digital innovation by operationalising “all data through one platform for all the moments that matter”

The pandemic has brought a period of transformation across businesses globally, pushing data and analytics to the forefront of decision making. Starting from enabling advanced data-driven operations to creating intelligent workflows, enterprise leaders have been looking to transform every part of their organisation.

SingleStore is one of the leading companies in the world, offering a unified database to facilitate fast analytics for organisations looking to embrace diverse data and accelerate their innovations. It provides an SQL platform to help companies aggregate, manage, and use the vast trove of data distributed across silos in multiple clouds and on-premise environments.

**Your expertise needed! **Fill up our quick Survey

#featured #data analytics #data warehouse augmentation #database #database management #fast analytics #memsql #modern database #modernising data platforms #one stop shop for data #singlestore #singlestore data analytics #singlestore database #singlestore one stop shop for data #singlestore unified database #sql #sql database

Mathew Rini

1615544450

How to Select and Hire the Best React JS and React Native Developers?

Since March 2020 reached 556 million monthly downloads have increased, It shows that React JS has been steadily growing. React.js also provides a desirable amount of pliancy and efficiency for developing innovative solutions with interactive user interfaces. It’s no surprise that an increasing number of businesses are adopting this technology. How do you select and recruit React.js developers who will propel your project forward? How much does a React developer make? We’ll bring you here all the details you need.

What is React.js?

Facebook built and maintains React.js, an open-source JavaScript library for designing development tools. React.js is used to create single-page applications (SPAs) that can be used in conjunction with React Native to develop native cross-platform apps.

React vs React Native

  • React Native is a platform that uses a collection of mobile-specific components provided by the React kit, while React.js is a JavaScript-based library.
  • React.js and React Native have similar syntax and workflows, but their implementation is quite different.
  • React Native is designed to create native mobile apps that are distinct from those created in Objective-C or Java. React, on the other hand, can be used to develop web apps, hybrid and mobile & desktop applications.
  • React Native, in essence, takes the same conceptual UI cornerstones as standard iOS and Android apps and assembles them using React.js syntax to create a rich mobile experience.

What is the Average React Developer Salary?

In the United States, the average React developer salary is $94,205 a year, or $30-$48 per hour, This is one of the highest among JavaScript developers. The starting salary for junior React.js developers is $60,510 per year, rising to $112,480 for senior roles.

* React.js Developer Salary by Country

  • United States- $120,000
  • Canada - $110,000
  • United Kingdom - $71,820
  • The Netherlands $49,095
  • Spain - $35,423.00
  • France - $44,284
  • Ukraine - $28,990
  • India - $9,843
  • Sweden - $55,173
  • Singapore - $43,801

In context of software developer wage rates, the United States continues to lead. In high-tech cities like San Francisco and New York, average React developer salaries will hit $98K and $114per year, overall.

However, the need for React.js and React Native developer is outpacing local labour markets. As a result, many businesses have difficulty locating and recruiting them locally.

It’s no surprise that for US and European companies looking for professional and budget engineers, offshore regions like India are becoming especially interesting. This area has a large number of app development companies, a good rate with quality, and a good pool of React.js front-end developers.

As per Linkedin, the country’s IT industry employs over a million React specialists. Furthermore, for the same or less money than hiring a React.js programmer locally, you may recruit someone with much expertise and a broader technical stack.

How to Hire React.js Developers?

  • Conduct thorough candidate research, including portfolios and areas of expertise.
  • Before you sit down with your interviewing panel, do some homework.
  • Examine the final outcome and hire the ideal candidate.

Why is React.js Popular?

React is a very strong framework. React.js makes use of a powerful synchronization method known as Virtual DOM, which compares the current page architecture to the expected page architecture and updates the appropriate components as long as the user input.

React is scalable. it utilises a single language, For server-client side, and mobile platform.

React is steady.React.js is completely adaptable, which means it seldom, if ever, updates the user interface. This enables legacy projects to be updated to the most new edition of React.js without having to change the codebase or make a few small changes.

React is adaptable. It can be conveniently paired with various state administrators (e.g., Redux, Flux, Alt or Reflux) and can be used to implement a number of architectural patterns.

Is there a market for React.js programmers?
The need for React.js developers is rising at an unparalleled rate. React.js is currently used by over one million websites around the world. React is used by Fortune 400+ businesses and popular companies such as Facebook, Twitter, Glassdoor and Cloudflare.

Final thoughts:

As you’ve seen, locating and Hire React js Developer and Hire React Native developer is a difficult challenge. You will have less challenges selecting the correct fit for your projects if you identify growing offshore locations (e.g. India) and take into consideration the details above.

If you want to make this process easier, You can visit our website for more, or else to write a email, we’ll help you to finding top rated React.js and React Native developers easier and with strives to create this operation

#hire-react-js-developer #hire-react-native-developer #react #react-native #react-js #hire-react-js-programmer

What are hooks in React JS? - INFO AT ONE

In this article, you will learn what are hooks in React JS? and when to use react hooks? React JS is developed by Facebook in the year 2013. There are many students and the new developers who have confusion between react and hooks in react. Well, it is not different, react is a programming language and hooks is a function which is used in react programming language.
Read More:- https://infoatone.com/what-are-hooks-in-react-js/

#react #hooks in react #react hooks example #react js projects for beginners #what are hooks in react js? #when to use react hooks

A one-stop-shop for comparing the features of all the best React frameworks

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!

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

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

Frameworks

Framework Statistics

Name Homepage Repository Stars Forks Issues License
Ant Design ant.design ant-design/ant-design 63,025 23,929 494 MIT
Atlaskit atlassian.design bitbucket.org/atlassian/atlaskit-mk-2
Blueprint blueprintjs.com palantir/blueprint 16,653 1,716 526 Apache 2.0
Carbon Design react.carbondesignsystem.com carbon-design-system/carbon 3,429 764 410 Apache 2.0
Chakra UI chakra-ui.com chakra-ui/chakra-ui 10,165 677 85 MIT
Elastic UI elastic.github.io/eui elastic/eui 2,194 384 359 Apache 2.0
Element element.eleme.io ElemeFE/element 47,064 11,312 2,016 MIT
Elemental UI elemental-ui.com elementalui/elemental 4,318 248 50 MIT
Evergreen evergreen.segment.com segmentio/evergreen 10,009 569 76 MIT
Gestalt gestalt.netlify.app pinterest/gestalt 3,615 261 12 Apache 2.0
Grommet v2.grommet.io grommet/grommet 6,594 790 233 Apache 2.0
Material UI material-ui.com mui-org/material-ui 60,626 17,805 460 MIT
Onsen UI onsen.io OnsenUI/OnsenUI 8,072 918 141 Apache 2.0
Orbit orbit.kiwi kiwicom/orbit 697 66 55 MIT
Prime React primefaces.org/primereact primefaces/primereact 1,508 370 211 MIT
Quasar quasar.dev quasarframework/quasar 16,056 1,864 225 MIT
React Bootstrap react-bootstrap.github.io react-bootstrap/react-bootstrap 18,205 2,910 96 MIT
React Toolbox react-toolbox.io react-toolbox/react-toolbox 8,630 1,050 262 MIT
react-md react-md.mlaursen.com mlaursen/react-md 2,118 308 41 MIT
Ring UI jetbrains.github.io/ring-ui JetBrains/ring-ui 2,484 131 10 Apache 2.0
Semantic UI semantic-ui.com Semantic-Org/Semantic-UI 48,410 5,081 1,016 MIT
Smooth UI smooth-code.com/open-source/smooth-ui smooth-code/smooth-ui 1,530 111 10 MIT
UI Fabric developer.microsoft.com/en-us/fluentui microsoft/fluentui 9,307 1,685 953 Other
Zendesk Garden garden.zendesk.com zendeskgarden/react-components 787 51 10 Apache 2.0

all of the above statistics were last updated Thu, 03 Sep 2020 00:36:11 GMT. For real-time data, see the website.

Framework Features

Criteria
  • Native Dark Mode: The project is made with dark-mode styling in mind. An out-of-the-box dark mode is either used on the docs site itself or well documented and easy to configure.
  • Design Kits: Ready-made resources exist for designers such as Sketch or Figma download packs.
  • RTL Support: Explicit right-to-Left support for use in apps with languages like Arabic, Hebrew, or Persian.
  • Themer: A user-interactable theming area where designers and developers can play around with look and feel without needing to do any programming.
  • Native TypeScript: Is either written in TypeScript (ideally) or has TypeScript definitions directly in the project. DefinitelyTyped does not qualify.
Name Native Dark Mode Design Kits RTL Support Themer Native TypeScript
Ant Design ✔️ Figma, Sketch ✔️ Link ✔️
Atlaskit Sketch
Blueprint ✔️ Sketch ✔️ ✔️
Carbon Design ✔️ Sketch ✔️ Link
Chakra UI ✔️
Elastic UI ✔️ Sketch ✔️
Element Axure, Sketch Link
Elemental UI
Evergreen Sketch
Gestalt ✔️
Grommet Custom, Framer X, Sketch ✔️ Link ✔️
Material UI ✔️ Figma, Sketch ✔️ Link ✔️
Onsen UI ✔️ ✔️
Orbit Abstract, Sketch ✔️ Link
Prime React ✔️
Quasar ✔️ ✔️ Link ✔️
React Bootstrap ✔️
React Toolbox ✔️
react-md ✔️ ✔️
Ring UI
Semantic UI Sketch ✔️
Smooth UI ✔️
UI Fabric ✔️ Figma, Sketch ✔️
Zendesk Garden ✔️ ✔️

Components

Alert

Alerts are used to show an important message to users.

Criteria
  • Closable: The alert has an “out of the box” way to dismiss, usually with an onClose prop.
  • Types: The alert has ready-made variations.
Framework Name Closable Types
Ant Design Alert ✔️ error, info, success, warning
Atlaskit SectionMessage change, confirmation, error, info, warning
Atlaskit Flag change, confirmation, error, info, warning
Chakra UI Alert ✔️ error, info, success, warning
Element Alert ✔️ error, info, success, warning
Elemental UI Alert danger, info, primary, success, warning
Evergreen Alert ✔️ danger, none, success, warning
Material UI Alert ✔️ error, info, success, warning
Orbit Alert ✔️ critical, info, success, warning
Quasar banner
React Bootstrap Alert ✔️ danger, dark, info, light, primary, secondary, success, warning
Ring UI Alert ✔️ error, loading, message, success, warning
Smooth UI Alert danger, dark, info, light, primary, secondary, success, warning
UI Fabric MessageBar ✔️ blocked, error, info, remove, severeWarning, success, warning
Zendesk Garden Notification ✔️ error, info, success, warning

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

Button

Users trigger actions by clicking on buttons.

Criteria
  • Disabled: A disabled prop exists for use in situations where the user cannot interact with the button.
  • Groupable: A ButtonGroup component exists in the library, or other such pre-made methods for making button groups.
  • Icon: An icon can be included either at the left or right of the text, or button can be used with just an icon and no text (notated as only).
  • Loading: The button has a pre-made loading state for asynchronous events.
  • Sizes: The button can be easily sized between different (and consistent) major sizes.
Framework Name Disabled Groupable Icon Loading Sizes
Ant Design Button ✔️ ✔️ left, only, right ✔️ default, large, small
Atlaskit Button ✔️ ✔️ left, right ✔️
Blueprint Button ✔️ ✔️ left, only, right ✔️ default, large
Carbon Design Button ✔️ ✔️ only, right ✔️ default, field, small
Chakra UI Button ✔️ left, only, right lg, md, sm, xs
Elastic UI Button ✔️ ✔️ left, only, right ✔️ m, sm, xs
Element Button ✔️ ✔️ left, only, right ✔️ default, medium, mini, small
Elemental UI Button ✔️ default, extra small, large, small
Evergreen Button ✔️ ✔️ left, only, right ✔️ arbitrary pixel sizes
Gestalt Button ✔️ only lg, md, sm
Grommet Button ✔️ left, only, right
Material UI Button ✔️ ✔️ left, only, right large, medium, small
Onsen UI Button ✔️ default, large
Orbit Button ✔️ ✔️ left, only, right ✔️ large, normal, small
Prime React Button left, only, right
Quasar btn ✔️ ✔️ left, only, right ✔️ custom, lg, md, sm, xs
React Bootstrap Button ✔️ ✔️ lg, sm
React Toolbox Button ✔️ left, only
react-md Button ✔️ left, only, right
Ring UI Button ✔️ ✔️ left, only ✔️ default, large, small
Semantic UI Button ✔️ ✔️ left, only, right ✔️ big, huge, large, massive, medium, mini, small, tiny
Smooth UI Button ✔️ base, lg, sm, xl, xs
UI Fabric Button ✔️
Zendesk Garden Button ✔️ ✔️ only default, large, small

Checkbox

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

Criteria
  • Custom Icon: A custom icon can be provided in place of the checkbox itself via a prop or a child.
  • Disabled: The checkbox has a disabled state, indicating the user cannot interact with it
  • Indeterminate: The checkbox has an indeterminate state.
  • Invalid: The checkbox has an invalid or error state.
  • Label Placement: The text can be positioned at different places around the checkbox.
Framework Name Custom Icon Disabled Indeterminate Invalid Label Placement
Ant Design Checkbox ✔️ ✔️ right
Atlaskit Checkbox ✔️ ✔️ ✔️ right
Blueprint Checkbox ✔️ left, right
Carbon Design Checkbox ✔️ ✔️ right
Chakra UI Checkbox ✔️ ✔️ ✔️ right
Elastic UI Checkbox ✔️ ✔️ right
Element Checkbox ✔️ ✔️ right
Elemental UI Checkbox right
Evergreen Checkbox ✔️ ✔️ ✔️ right
Gestalt Checkbox ✔️ ✔️ ✔️ right
Grommet CheckBox ✔️ ✔️ right
Material UI Checkbox ✔️ ✔️ ✔️ above, below, left, right
Onsen UI Checkbox ✔️ ✔️ ✔️ right
Orbit Checkbox ✔️ ✔️ right
Prime React Checkbox ✔️ right
Quasar checkbox ✔️ ✔️ left, right
React Bootstrap Form.Check ✔️
React Toolbox Checkbox ✔️ right
react-md Checkbox ✔️ ✔️ right
Ring UI Checkbox ✔️ right
Semantic UI Checkbox ✔️ ✔️ right
Smooth UI Checkbox ✔️ right
UI Fabric Checkbox ✔️ ✔️ left, right
Zendesk Garden Checkbox ✔️ ✔️ right

ErrorBoundary

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

Criteria
  • Custom Text: Has a prop or props that can be used to provide a custom title and/or description (as a string, not a ReactNode).
  • Drop-In JSX Fallback: Has a prop that can be used to provide a custom ReactNode fallback that does not receive the date of componentDidCatch.
  • Wrapper JSX Fallback: Has a prop that can be used to provide a custom ReactNode for fallback which receives the data of componentDidCatch.
Framework Name Custom Text Drop-In JSX Fallback Wrapper JSX Fallback
Ant Design Alert.ErrorBoundary ✔️
Carbon Design ErrorBoundary ✔️
Elastic UI ErrorBoundary

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.
Framework Name Can Be Vertical Clickable Step Description Step Error Step Icon
Ant Design Steps ✔️ ✔️ ✔️ ✔️ ✔️
Atlaskit ProgressTracker ✔️
Carbon Design ProgressIndicator ✔️ ✔️ ✔️ ✔️
Elastic UI Steps ✔️
Element Steps ✔️ ✔️ ✔️ ✔️
Material UI Stepper ✔️ ✔️ ✔️ ✔️ ✔️
Prime React Steps ✔️
Quasar Stepper ✔️ ✔️ ✔️ ✔️ ✔️
Semantic UI Steps ✔️ ✔️ ✔️ ✔️
Zendesk Garden Stepper

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.
Framework Name Disabled Indeterminate Internal Icons Internal Text Lable Placement Loading Sizes
Ant Design Switch ✔️ ✔️ ✔️ ✔️ default, small
Atlaskit Toggle ✔️ large, regular
Blueprint Switch ✔️ ✔️ left, right default, large
Carbon Design Switch ✔️ right default, small
Chakra UI Switch ✔️ left, right lg, md, sm
Elastic UI Switch ✔️ right compressed, default
Element Switch ✔️ left, right
Evergreen Switch ✔️ integers
Gestalt Switch ✔️
Grommet CheckBox ✔️ left, right
Material UI Switch ✔️ above, below, left, right default, small
Onsen UI Switch ✔️
Prime React InputSwitch ✔️
Quasar toggle ✔️ ✔️ left, right custom, lg, md, sm, xl, xs
React Bootstrap Form.Check ✔️ right
React Toolbox Switch ✔️ right
Ring UI Toggle ✔️ left, right
Smooth UI Switch ✔️ ✔️ base, lg, sm, xl, xs
UI Fabric Toggle ✔️ left, right
Zendesk Garden Toggle above, below

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

Tabs

Users switch between different views with tabs.

Criteria
  • Can Be Vertical: The tabs can be stacked vertically.
Framework Name Can Be Vertical
Ant Design Tabs ✔️
Atlaskit Tabs
Blueprint Tabs ✔️
Carbon Design Tabs
Chakra UI Tabs ✔️
Elastic UI Tabs
Element Tabs ✔️
Evergreen Tablist ✔️
Gestalt Tabs
Grommet Tabs
Material UI Tabs ✔️
Onsen UI Tabbar
Prime React TabView
Quasar tabs ✔️
React Bootstrap Tabs
React Toolbox Tabs
react-md Tabs
Ring UI Tabs
Semantic UI Tabs
UI Fabric Pivot
Zendesk Garden Tabs ✔️

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.

Download Details:

Author: dimitropoulos

Demo: https://react-ui-roundup.dimitrimitropoulos.com/

Source Code: https://github.com/dimitropoulos/react-ui-roundup

#reactjs #react #javascript