Top React Component Libraries for 2020

There is a new, updated version of this post here: https://retool.com/blog/react-component-libraries/

If you’re a developer without design expertise, or if you work at a company where the designers are stretched thin, it is easy to make any internal dash you are building look hideous. And no matter how great the functionality, if it looks terrible, your team won’t use it. On the flip side, you may have styled a beautiful component, but if it lacks crucial functionality — like accessibility or efficient data display — it will be useless.

Step in React component libraries. A React component library is a collection of styled React components that you can use in your React applications to save time, add functionality, increase efficiency, and make the app look great. Most React component libraries are open source, which means they’re free and (often) constantly improving. They’re generally optimized for efficiency, responsive, based on strategic design principles, and some are even optimized for mobile.

This article will list six of our favorite React component libraries in 2020, present some of their best features, and help you decide which library is the right one, based on your needs.

Our Favorite React Component Libraries and Their Features

Each library in this list will include:

A screenshot of some popular components in the library
A link to the library’s GitHub along with the current (at the time of writing) number of stars
The number of React components included in the library
- Most libraries have a number of components that include Buttons, Iconography, Typography, Layout, Navigation, Data Entry, Data Display, and Feedback/Alerts
A list of compatible browsers
A code snippet showing how to use the library in a React app

Ant Design: most popular on GitHub

To kick off this list, we’re starting with Ant Design, the most popular React component library on GitHub. Self-described as enterprise-level design, the Ant Design library is based on four design principles:

Natural — users should be able to easily intuit how to interact with the design.
Certain — designs are created with thought and purpose.
Meaningful — every design is made with the purpose of helping the user accomplish their mission.
Growing — designs will evolve over time to better meet the needs of the user.

These principles were established in order to help their engineering teams make quick iterations on their product while keeping in sync with design and maintaining a great UX. Extra fun fact: We use Ant icons in Retool!

GitHub: 61k+ stars
Components: 50+
Compatible Browsers:
- IE/Edge
- Firefox
- Chrome
- Safari
- Opera

Below is a code sample (courtesy of the Ant Design docs) of how you would import and use Button and DatePicker components from Ant Design in a React app.

1import { Button, DatePicker } from 'antd';
2
3const App = () => (
4 <>
5   <Button type="primary">PRESS ME</Button>
6   <DatePicker placeholder="select date" />
7 </>
8);
9

After running the code above, your output should look something like this:

It’s not pretty, but that’s what CSS is for!

➞ Material-UI: Google design principles

Material-UI is a React component library based on Material Design, Google’s design language for user interfaces. If you like Google’s aesthetic — think cards, grid-based layouts, and responsive animations — this is the right library for your frontend.

Additionally, Material-UI components inject only the styles they need and don’t use a global style sheet (though you can use CSS modules, styled-components, or any other kind of styling you like with this library). Users of Material-UI include a lot of companies you have definitely heard of, including NASA, Netflix, and Amazon.

GitHub: 58k+ stars
Components: 60+
Compatible Browsers:
- IE
- Edge
- Firefox
- Chrome
- Safari
- Googlebot

Below is a code snippet (courtesy of the Material-UI docs) of how you would import and use a Button component from Material-UI in a React app.

1import React from 'react';
2import ReactDOM from 'react-dom';
3import Button from '@material-ui/core/Button';
4
5function App() {
6 return (
7   <Button variant="contained" color="primary">
8     Hello World
9   </Button>
10 );
11}
12
13ReactDOM.render(<App />, document.querySelector('#app'));
14

If you used the above code snippet correctly, you would end up with a “Hello World” button like so:

➞ Fluent UI: Microsoft design principles

If Google isn’t your aesthetic (hey, it’s not for everyone), then Fluent UI – a React component library based on Microsoft’s design principles – might be a good option. This library, formerly known as Office UI Fabric React, has all of the same components that you will recognize (and love?) from Microsoft 365 apps.

GitHub: 8.6k+ stars
Components: 60+
Compatible Browsers:
- IE 11/Edge
- Chrome
- Firefox
- Safari

Below is a code snippet (courtesy of the Fluent UI docs) of how you would import and use the PrimaryButton component from Fluent UI in a React app.

1import React from 'react';
2import ReactDOM from 'react-dom';
3import { PrimaryButton } from '@fluentui/react/lib/Button';
4
5ReactDOM.render(
6   <PrimaryButton>I am a button.</PrimaryButton>,
7   document.getElementById('root')
8);
9

Using the Fluent UI code snippet above generates the following component:

➞ React Virtualized: best for data

React Virtualized is one of those React component libraries that is hyper focused on doing one thing and doing that one thing really well, and that thing is large datasets. Scope is fairly narrow: there are five components in the React Visualized library, Collection, Grid, List, Masonry, and Table.

GitHub: 19.3k+
Components: 5
Compatible browsers:
- All evergreen browsers
- Recent mobile browsers for iOS and Android
- IE 9+ (requires extra custom CSS)

Below is a code snippet (courtesy of the React Virtualized docs) of how you would import and use Column and Table components in a React app.

1import React from 'react';
2import ReactDOM from 'react-dom';
3import {Column, Table} from 'react-virtualized';
4import 'react-virtualized/styles.css'; // only needs to be imported once
5
6// Table data as an array of objects
7const list = [
8 {name: 'Brian Vaughn', description: 'Software engineer'},
9 // And so on...
10];
11
12// Render your table
13ReactDOM.render(
14 <Table
15   width={300}
16   height={300}
17   headerHeight={20}
18   rowHeight={30}
19   rowCount={list.length}
20   rowGetter={({index}) => list[index]}>
21   <Column label="Name" dataKey="name" width={100} />
22   <Column width={200} label="Description" dataKey="description" />
23 </Table>,
24 document.getElementById('example'),
25);
26

After importing and using the column and table components via the code snippet above, you would end up with an output that includes two columns--name and description--each with one value under them.

It’s not much, but it’s a start!

➞ Rebass: lightweight library

If your main goal is to get started with a simple, lightweight library, then Rebass is the right React component library for you: the entire library comes in at a mere 4KB. The seven main principles behind Rebass state that it should be:

Minimal
Useful
Unopinionated
Flexible
Consistent
Extensible
Themeable

Due to this philosophy (whatever it means), the library has a small number of components included, but these components are built to be customized and extended. Plus, all components come with a basic default theme (AKA they are un-opinionated) but are easily themed (AKA themeable) because Rebass uses theme-specification, a spec for theme objects. You can build a theme using either Theme UI or Styled Theme and it will integrate seamlessly with Rebass.

GitHub: 6.6k+ stars
Components: 15+
Compatible browsers: “All modern browsers that React supports”

Below is a code snippet (courtesy of the Rebass docs) of how you would import and use Box, Heading, and Button components from Rebass in a React app.

1import React from 'react'
2import { Box, Heading, Button } from 'rebass'
3
4export default props =>
5 <Box>
6   <Heading>Hello</Heading>
7   <Button>Rebass</Button>
8 </Box>
9

After you ran the code snippet above, you’d end up with a box that includes a heading with “Hello” and a button with “Rebass.”

➞ Grommet: accessibility features

Accessibility is a critically important but often overlooked part of creating a web app, and it’s how Grommet differentiates as a component library. Grommet is specially made with accessibility features, including keyboard navigation, screen reader tags, and native support for W3c’s WCAG 2.1 spec.

Also, the list of notable users is quite extraordinary, including companies like Uber, Netflix, Boeing, Shopify, Twilio, and even GitHub. Speaking of Github:

GitHub: 6.4k+ stars
Components: 60+
Compatible browsers:
- IE11/Edge
- Chrome
- Firefox
- Safari

Below is a code snippet (courtesy of the HPE Developer blog) of how you would import and use Grommet and Heading components from Grommet in a React app. Note that is a special Grommet library component that will help with the accessibility features.

1import React from 'react';
2import { Grommet, Heading } from 'grommet'
3
4function App() {
5 return (
6   <Grommet className="App">
7     <Heading>
8       Please work!
9     </Heading>
10   </Grommet>
11 );
12
13}
14
15export default App;
16

Finally, after running the code in the snippet above to import and use Grommet and Heading, you’d end up with following:

Reader

Our Favorite React Component Libraries and Their Features