• 11 React UI Component Libraries You Should Know in 2019
  • Author: Jonathan Saring
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: ElizurHz
  • Proofreader: Wuzhengyan2015, Xiaxiayang

11 React UI Component Libraries you should know about in 2019

Although React lags far behind Angular in terms of users, it leads Stack Overflow’s list of favorite components:

React grew in popularity in 2017

React’s virtual DOM, its ability to declaratively describe the user interface and build state for it, and its low barrier to entry for some level oF JavaScript developers make React a great professional library for building UIs.

Another important reason to use React is its components. Components allow you to break up your UI into separate, reusable chunks. Here are 11 great React component libraries to help you get started with React components.

You can also use bits to combine these components and convert your components into modules that can be managed uniformly and synchronized across multiple projects.

  • Bit – Share and build componentsBit makes it fun and easy to develop software with smaller components, share between teams, and synchronize across all your projects

With Bit, you can easily share, develop, and synchronize components across multiple projects and applications, manage components for your team, and improve the workflow of React components with two-way code changes. Here’s an example.

React Hero UI component with Bit

1. React Material-UI

React Material-UI is a set of React components that implement Google’s Material Design. It has 30K + stars on GitHub and is probably the most popular React component library. The V1 version is coming soon.

2. React-Bootstrap

React-Bootstrap is a React component library with the look and feel of Twitter’s Bootstrap. Its minimalist style is very popular in the community, with over 11K stars.

3. React toolbox

React Toolbox is a set of React components that implement the Google Material Design specification. It is built on the latest proposals such as CSS Modules (based on SASS), WebPack, and ES6. Its website offers an online component playground.

4. React Belle

React Belle is a set of React components optimized for both mobile and desktop applications. The styles are highly customizable, so you can configure the base styles common to all components, or modify the styles individually within each component. Here’s a good example, too.

5. React Grommet

React Grommet provides a fairly rich set of components that are categorized by how they are used, all of which are easy to use, cross-browser compatible, and subject customizable.

6. React Components by Khan Academy

Khan Academy’s React component is released as a component library with inline CSS and annotations. Individual components can also be installed by adding the Bit Scope created by the library to the Bit.

7. Material Components Web

Material Components Web was developed by a core team of Engineers and UX designers at Google, and its Components support a reliable development workflow to build beautiful and useful Web projects. It replaced the React-MDL (now obsolete) and already has close to 7K stars.

8. Ant Design React

According to the Ant Design specification, React Ant Design is a React UI library that contains components and demos. It is written in TypeScript with full type definitions and also provides a front-end development flow for NPM + Webpack + DVA.

9. Semantic UI React

Semantic UI React is the official semantic-UI-React library. It has around 5K stars and has been adopted by Netflix and Amazon to provide an interesting and flexible Arsenal.

10. Onsen UI

Onsen UI React Components can be used with Onsen UI React Bindings, and provide a hybrid development mobile application using React and Onsen UI frameworks. With 81 contributors and over 5.6K stars, it’s an interesting library to consider.

11. React Virtualized

React Virtualized has about 8K stars and provides React components that can efficiently render long lists and flat figures.

Individual component

Each individual component can be found in the awesome-react and awesome- React – Components projects. You can also add bits to any repository or library to track and isolate components in the repository or library. These components can then be quickly exported directly from any path in the repository, and developers can install them using NPM or YARN and modify them in any project.

It looks like React will continue to grow in popularity in 2018, and the React component will gradually become a building block for more everyday applications.

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.


The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.