A curated collection of popular and useful React.js UI components, tools and libraries for building your application with an amazing UI.

" The secret to efficiently building ‘large’ things is generally to avoid building them in the first place. Instead, compose your large thing out of smaller, more focused pieces. This makes it easier to see how the small thing fits within the broader scope of your large thing. These concepts apply to existing ways of doing things, including Web Components. "

A. Osmani

Bit is the fastest and simplest way to share React components, create beautiful galleries reuse components between apps. With Bit, you can easily share components from any React applications, organize them for your team and use them in other applications with NPM and Yarn. It saves the overhead of keeping component in separate repos just to publish packages, makes maintenance much easier with component source code distribution and provides great discoverability. Here is an example gallery of components. It's free for open source and for up to 3 private collections.

React components provide greater modularity which is great for code sharing, reuse, maintenance, testability and separation of concerns. They also help you split your UI into independent, reusable pieces and think of them in isolation.

To help you build your next React application with a great UI, here are some popular and useful resource for working with React components in 2018. Enjoy.

Build with React components

The fastest way to share React components with beautiful galleries and simple reusability

An interactive UI development environment

Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components. Storybook runs outside of your app. You can develop components in isolation, which can improve component reuse, testability, and development speed. You can build quickly without having to worry about application-specific dependencies.

Universal React application platform

Built at WalmartLabs Electrode is a platform for building small to large scale universal ReactJS/NodeJS web applications with a standardized structure, best practices, and modern technologies baked in. Electrode focuses on performance, component reusability, and simple deployment to multiple cloud providers—so you can focus on what makes your app unique.

React components that implement Google's Material Design

With over 30k stars on GitHub, it is probably the most popular React component library. The project is still under heavy development which is directly sponsored by the community. You can also check out the project's documentation website and There are 3 projects that you can look at to get started.

React Bootstrap

React components with the look and feel of Bootstrap 3. At over 12K stars on GitHub and thousands of users t's still under development.

A super-fast static site generator for React

Gatsby is a powerful and simple static site generator for React. It can help you transform any plain text into beautiful React websites without the overhead of setting up, deploying and maintaining complicated databases and servers. For developers already working with React, it can save a lot of time and effort while making sure your work looks awesome.

Tutorials from

the ecosystem

React.js provides a low barrier to entry for any developer with decent Javascript skills. It's basically view oriented and not a heavy VM framework. As such, onboarding to start working with React components is simple with a short learning curve.

React.js components, from simple components like "button" or "slider" to higher level wrapper components, help you "think React" and increase the modularity of your application while making it's different building blocks more reusable.

This reusability helps you achieve desired outcomes. First, it improves the consistency of your UI throughout your application, and given the right sharing, throughout all your apps and platforms. Keeping a consistent UI is key in your costumer's experience and empowers the impression your application leaves on its users while strengthening your brand. A consistent UI is not something which is easy to achieve or to be underestimated.

Reusability through React components also makes it easier to develop and test your app, and makes maintenance simpler by separating concerns. It also helps to shorten the learning curve for new developers to join your team's work, and given the right tooling saves times by not reinventing the wheel over and over again.