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.

 

Bit- the fastest way to share code

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

react storybook

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.

Electrdoe

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 material ui

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 boostrap

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.

gatsby react

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.

Terms of use

React component IO © 2018

React grommet

React Grommet

A neat selection of essential components organized by usage classifications which are all accessible, cross-browser compatible and support theme adjustments.

ant design react

React Ant Design

React components written in TS and following the Ant Design specifications which can be used with Webpack and NPM to build rich UIs.

material web components
onsen rui react
semantic ui react

Semantic UI React

Semantic UI is used by Netflix and Amazon, and it's React integration which includes a set of components is popular with over 5k stars.

With nearly 6k stars these components are made available through Onsen UI's React integration with hybrid mobile apps.

Onsen UI React

Material Web

Developed by a team at Google these components replaced React MDL reaching nearly 7k stars on GitHub.

react toolbox
khan components
React belle

React Belle

React component written by team members of the styled-components and polished projects with highly configurable styles and hybrid adaptivity.

React components built by Khan academy with inline CSS and released to the community with an MIT license. 

Khan components

React Toolbox

These React components implementing Google's material design working with SASS, ES6 and webpack reached 8k stars on GitHub.

Blueprintjs

Blueprint JS

At over 8k stars it's a collection of React UI components that cover the majority of the common interface elements, patterns, and interactions on the web.

Atlassian's UI library built according to their design guide lines (ADG). a collection of reusable components that can be downloaded independently into your projects with NPM.

Atlas Kit

atlaskit
Prime react

With over 60 components it's a rich collection of UI components for React which also a verity of themes and optimized native templates. 

Prime React

React Component IO

reactstrap

Reactstrap

React components with Bootstrap 4 which favor composition and control. The library does not depend on jQuery or Bootstrap javascript. 

awesome react

Awesome React

An open source collection of awesome tools, libraries and other things related to React's ecosystem.

At 12k stars it's a useful catalogue of React components and tools to build your UI.

Awesome React Components

awesome react components

Useful Resources

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. 

Feel free to get started with React and build your amazing app!

Why work with React components?