paint-brush
23 Best React UI Component Libraries And Frameworksby@ysaring
286,161 reads
286,161 reads

23 Best React UI Component Libraries And Frameworks

by Jonathan Saring
Jonathan Saring HackerNoon profile picture

Jonathan Saring

@ysaring

I write code and words. Working on github.com/teambit/bit

April 3rd, 2018
Read on Terminal Reader
Read this story in a terminal
Print this story
Read this story w/o Javascript
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

<em>A curated summary of </em><a href="https://blog.bitsrc.io/11-react-component-libraries-you-should-know-178eb1dd6aa4" target="_blank"><strong><em>part 1</em></strong></a><em> and </em><a href="https://blog.bitsrc.io/best-react-ui-component-libraries-for-2018-part-2-d231dcb04c0a" target="_blank"><strong><em>part 2</em></strong></a><strong><em> </em></strong><em>of</em><strong><em> “</em></strong><em>Best </em><a href="https://hackernoon.com/tagged/react" target="_blank"><em>React</em></a><em> Component Libraries for 2019</em><strong><em>”</em></strong><em>.</em>

Companies Mentioned

Mention Thumbnail
Amazon
Mention Thumbnail
ATLASSIAN
featured image - 23 Best React UI Component Libraries And Frameworks
1x
Read by Dr. One voice-avatar

Listen to this story

Jonathan Saring HackerNoon profile picture
Jonathan Saring

Jonathan Saring

@ysaring

I write code and words. Working on github.com/teambit/bit

About @ysaring
LEARN MORE ABOUT @YSARING'S
EXPERTISE AND PLACE ON THE INTERNET.

image

A curated summary of part 1 and part 2 of Best React Component Libraries for 2019.

Learn more:

According to the Stack Overflow survey React grew in popularity by almost 150% from 2017 to 2018. This isn’t really surprising, and among other things is happening thanks to its growing component-based ecosystem.

Some prefer libraries, others to develop their own components (see tools for component workflow mastery). Either way, here is the full list of some of the best 23 UI component libraries and frameworks out there, with a bonus at the end. Note that the list isn’t ranked, but brought as a useful resource. Enjoy.

You can also combine these libraries with Bit, to make each component individually available to discover, share and use without the library.

image

Every component becomes available to discover, try hands-on in a live playground, and install in your projects using NPM and Yarn. You can even develop components from multiple projects and sync changes between them.

image

Bit (GitHub) can be used to discover and share components from any open source library, or for your team’s components, so feel free to give it a try.

Find more components from popular React libraries:


Discover Collections · Bit_Discover over 21 component collections for JavaScript libraries and projects. Find and use popular components from the…_bit.dev

1. Material-UI

React components that implement Google’s Material Design. At over 45k Stars (!), it’s the most popular and widely used React UI library on GitHub.

image

Material UI Grid-List component

GitHub repo:


mui-org/material-ui_React components for faster and easier web development. Build your own design system, or start with Material Design. …_github.com

Individual components collection:


material-ui by mui-org · Bit_React components that implement Google’s Material Design. — 115 Javascript components. Examples: tab , tooltip …_bit.dev

image

2. React Bootstrap

Bootstrap 3 components built with React. At 16k stars, this library remains popular and useful even though we are still waiting for bootstrap 4 support.

image

React bootstrap buttons

GitHub repo:


react-bootstrap/react-bootstrap_Bootstrap components built with React. Contribute to react-bootstrap/react-bootstrap development by creating an account…_github.com

Individual components collection:


react-bootstrap by react-bootstrap · Bit_Bootstrap components built with React — 92 Javascript components. Examples: button-group , alert , modal , navbar …_bit.dev

image

3. Grommet

Beautiful React UI component which focus on essential experience. At over 5k stars, these components take pride in their simple yet beautiful design.

image

React Grommet buttons

GitHub repo:


grommet/grommet_a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package …_github.com

Individual components collection:


grommet by grommet · Bit_a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package. - 73…_bit.dev

image

4. Ant Design React

Popular React components following the Ant design guidelines and specifications, written in typescript and supporting a rich workflow.

image

Ant design components

5. Blueprint

A React-based UI toolkit for the web with over 9K stars and 100 contributors. Components are written in TS and styled with Sass for rapid development.

image

Blueprint React components

6. Reactstrap

This library provides simple React bootstrap 4 components. With over 4k stars and nearly 100 contributors, it’s a widely popular option for bootstrap fans.

image

Reactstrap buttons

7. React Toolbox

React Toolbox is a set of React components that implements Google Material Design. It’s built on top of some the trendiest proposals like CSS Modules (written in SASS), Webpack and ES6. At nearly 8K starts it’s very popular.

image

React Toolbox components- docs have a live playground!

8. React Desktop

A UI component library which aims to bring a native desktop experience to the web, featuring many macOS Sierra and Windows 10 components.

image

React Desktop Window Component

9. Semantic UI

Semantic UI React is the official React integration for Semantic UI. With 6.5K stars it’s used by Netflix, Amazon and other great organizations.

image

React Semantic-UI Dimmer component

GitHub repo:


Semantic-Org/Semantic-UI-React_The official Semantic-UI-React integration. Contribute to Semantic-Org/Semantic-UI-React development by creating an…_github.com

Individual components collection:


semantic-ui-react by semantic-org · Bit_The official Semantic-UI-React integration — 76 Javascript components. Examples: button , dimmer , text-area , table …_bit.dev

image

10. Onsen UI React

More than 100 components are specially made for Material and Flat design bringing together the Onsen UI framework and React to build hybrid apps.

image

Onsen UI React components

11. Rebass

React UI component library & design system, built with styled-components and styled-system. With nearly 4k stars it’s a great choice for Styled-components fans.

image

Rebass React UI components

12. Elemental UI

An experimental UI Toolkit for React.js Websites and Apps with 4k stars and currently developed by the authors of Keystone.js at the Thinkmill.

image

Elemental UI modal component

13. Belle

A set of React components optimized for mobile & desktop with highly customizable styles which can be configured on the base level as well individually for each one of them.

image

React belle components

14. Prime React

At over 1000 stars, we love this project which provides a rich and unique selection of over 70 UI components with multiple themes. Take a look!

image

A Primereact Chart component with Bit: play and install

GitHub repo:


primefaces/primereact_PrimeReact is a collection of rich UI components for React - primefaces/primereact_github.com

Individual components collection:


primereact by primefaces · Bit_PrimeReact is a collection of rich UI components for React. - 73 Javascript components. Examples: chart , inputtext …_bit.dev

image

15. Atlaskit

Atlasssian’s official React UI kit is the technical implementation of the Atlassian Design Guidelines (ADG). Each is even its own package.

image

Atlaskit Multi-select React component

16. Fabric

A set of React components for building experiences for Office and Office 365, written in Typescript. At over 2.5K stars it’s worth checking out (quick-start).

image

Fabric Nav-Bar React Component

17. Carbon Components

React components according to IBM’s Carbon design system. You can also try them online with

.

image

18. Khan React Components

These somehow almost unnoticed components are Khan’s academy’s React UI components released to the community reaching nearly 1k stars.

image

Khan’s blur-input React component

19. Gestalt by Pinterest

This upcoming library is Pinterest’s design studio meticulous set of React UI building blocks used to sync and raise the bar among Pinterest’s teams.

image

Gestalt React search-filed component

20. Material Components Web

Developed by a team of engineers and designers at Google, this library replaced react-mdl, already reaching nearly 7k stars. Check it out.

image

Material-web components

21. React MD

A beautiful and highly recommended kit for building a web app with Google’s Material Design with very highly customizable themes and styling (Sass).

image

React-MD subheaders component

22. React Foundation

In very active development this project wraps parts of Foundation as React components, and takes pride in simplicity and high coverage. Very nice.

image

Foundation’s button component with React

GitHub repo:


digiaonline/react-foundation_Foundation as React components. Contribute to digiaonline/react-foundation development by creating an account on…_github.com

Individual components collection:


primereact by primefaces · Bit_PrimeReact is a collection of rich UI components for React. - 73 Javascript components. Examples: chart , inputtext …_bit.dev

image

23. React Virtualized

Pretty much the perfect set of React components for virtualizing large data sets. With nearly 10k stars it is popular as it is useful.

image

React virtualized components

+5 Bonus ✨

Sadly, most of them aren’t actively maintained. Still worth checking out.

* React UWP

Microsoft’s UWP design with React.

image

* Amaze UI React

a React implementation for the china’s popular Amaze-UI cross-platform framework.

image

* UXCore

React components for enterprise back-end data apps.

image

* Zent

A beautiful under-the-radar Chinese React UI library.

image

* Halogen

Loaders and spinners only.

image

* React bootstrap with material design

Material Design for Bootstrap 4 — React version.


mdbootstrap/React-Bootstrap-with-Material-Design_React-Bootstrap-with-Material-Design - React Bootstrap with Material Design_github.com

* react-selectrix

A beautiful, materialized and flexible React Select control.


stratos-vetsos/react-selectrix_react-selectrix - A beautiful, materialized and flexible React Select control_github.com

* react-materialize


react-materialize/react-materialize_Material design for react, powered by materializecss - react-materialize/react-materialize_github.com

Not using libraries?

image

Adding entire libraries can be a burden and make it hard to change stuff on the fly. So, Individual components can be found in Awesome React and Awesome React components as well as here. Hope you enjoyed!

Learn more


Atomic Design With React And Bit: Simplify a Complex UI_Simplify a complex UI using Atomic Design with React + Bit._blog.bitsrc.io


5 Tools For Faster Development In React_5 tools to speed the development of your React application, focusing on components._blog.bitsrc.io


How To Share React UI Components Between Projects And Apps_How to easily share and sync your React UI components between all your team’s projects and applications with Bit._blog.bitsrc.io

L O A D I N G
. . . comments & more!

About Author

Jonathan Saring HackerNoon profile picture
Jonathan Saring@ysaring
I write code and words. Working on github.com/teambit/bit

TOPICS

THIS ARTICLE WAS FEATURED IN...

Arweave
Read on Terminal Reader
Read this story in a terminal
 Terminal
Read this story w/o Javascript
Read this story w/o Javascript
 Lite
Github
Virgool
Sobakapav
Vercel
Gitmemories
Crushingcode
Interlink-ua
Dipass
Tutsplanet
Skillcrush
Birthday-hackathon
Com
Drivingsalesinnovationguide
Cliffex
Techguilds
Altexsoft
Roocket
Masterwp
Ytuo
Ailoang
Tutsplanet

Mentioned in this story