7 Top React UI Packages to use in 2020

This article is a guest post by the amazing Nwose Lotanna. Nwose is a technical writer and frontend web developer and wrote this blog post through the Write for the Community program.

According to last year's state of JavaScript survey and this year's, Stack Overflow devs survey React is still the most loved and the most used frontend framework out there. React is used by millions of projects and has one of the biggest developer communities in the ecosystem. It is not surprising that a lot of user interface packages have been built on top of Reactor for React developers to use. These packages exist so that you can expand your knowledge of the React framework and also so you do not have to create everything from scratch.

In this post, we will take a look at some of the regularly maintained React UI packages you should know about in 2020 as a web developer. In no particular order, we will highlight the various unique features, how popular they are, and how to get started using them.

Chakra UI

With over 11,000 stars on GitHub Chakra UI by Segun Adebayo is one of the fast-growing React UI packages. If you want to build React apps that are both fast and accessible, Chakra UI has an extensive library of cool components that are simple to use and very composable. All elements ship with attributes and keyboard interactions for accessibility, checking a lot of the WAI-ARIA standards boxes.

To install Chakra UI and its peer dependencies, use the node package manager command below:

1npm install @chakra-ui/core @emotion/core @emotion/styled emotion-theming

To use a component, import them by their name from @chakra-ui/core package, as it is done below:

1import { Button } from "[@chakra](http://twitter.com/chakra)-ui/core";

For the button element, you can have them in your template section like this:

1<ButtonGroup spacing={4}>
2<Button variantColor="teal" size="xs">
3Button
4 </Button>
5<Button variantColor="teal" size="sm">
6Button
7</Button>
8<Button variantColor="teal" size="md">
9Button
10</Button>
11<Button variantColor="teal" size="lg">
12Button
13</Button>
14</ButtonGroup>

React Virtualized

This is a very niched React UI library specifically designed for rendering tables, lists, and data generally. It is one of the fastest UI libraries I have used, it has not-so-great looking documentation with a presentation page and the source code hosted differently on GitHub. It has been starred over 20,000 times and is clearly useful to the React community. This is the library to use to present any tabular data and all its components are focused on just that.

If you want to add react-virtualized to a project, you might want to check out react-window as a great alternative.

Learn more about how the two libraries compare here.

To install virtualized, use npm like this:

1npm install react-virtualized --save

Prime React

Prime React, with almost 2,000 stars on GitHub, has a lot of custom made open source components for React developers to build React apps conveniently. It prides itself as the most complete design-agnostic UI component library for React. I love that it works well with a few great dependencies like charts JS, Google Maps, Quill JS, and full calendar. It is regularly maintained and at the time of this publishing, the last commit to the project was a few days ago.

To use PrimeReact, you can install it with the node package manager with the command below:

1npm install primereact --save

1npm install primeicons --save

PrimeReact also ships with its own icon pack unlike a lot of packages where you have to get a third-party icon pack like font-awesome. For any component you want to use, this is how you import it inside your component:

1import { ComponentName } from 'primereact/{componentname}';

So, for Accordion, for instance you will import it like this:

1import { Accordion,AccordionTab } from 'primereact/accordion';

React Desktop

With almost 9,000 stars on GitHub, React Desktop by Gabriel Bull is the ideal React UI library used to build native desktop applications working with electron and NW JS. This is very exciting as a lot of libraries are optimized to be mobile-first, this library is focused on the desktop of various operating systems. So there are different components for Windows OS and the Mac OS too. This is unlike anything I have seen before and I think that is also why it has a lot of community members supporting it. It is constantly updated, the last commit was about 4 months ago.

To install this, you will have to use the node package manager and run the command below:

1npm install react-desktop --save

React Toolbox

React Toolbox with over 8,600 stars on GitHub is the React UI library that implements Google's material design. This is great for all the developers who moved from Angular to React but want to retain the feel of material design. It is written in SASS and ES6 and integrates seamlessly with Webpack. One interesting thing is that the docs are built with Toolbox, another interesting thing is that it was built and maintained by two Javis, Javi Velasco, and Javi Jimenez.

You can install React Toolbox as an npm package like this:

1npm install --save react-toolbox

For example, this is how a Button can be used in a component:

1import React from 'react';
2import ReactDOM from 'react-dom';
3import { Button } from 'react-toolbox/lib/button';
4ReactDOM.render(
5    <Button label="Hello World!" />,
6    document.getElementById('app')
7);

Reactstrap

For all the Bootstrap lovers, this UI library brings the best of both worlds, React, and Bootstrap 4. With Reactstrap you will be able to use Bootstrap in your React components. Bootstrap is the most used CSS library currently and having a React UI library that lets you use everything Bootstrap is simply amazing. With over 9,000 stars on GitHub, Reactstrap is the stateless React component for Bootstrap 4. It is constantly maintained, with the last commit being 2 weeks ago as of this writing.

To install Reactstrap with npm, run the command below:

npm install --save reactstrap react react-dom

To bring in a red button in your component, you can do so easily:

1import React from 'react';
2import { Button } from 'reactstrap';
3export default (props) => {
4  return (
5    <Button color="danger">Danger!</Button>
6  );
7
8`};

React Suite

This UI library is for your simple, minimalist designs, very focused on the user experience of the React application you are building. It is well-thought-out and designed for the middle platform and even backend products, the docs will tell you how minimalist design can be used to achieve a good experience. It has almost 5,000 stars on GitHub and the documentation supports another language, Chinese. It is very regularly maintained, the last commit as at the time of this writing was 17 hours ago.

You can install Suite using npm or yarn, with npm:

npm i rsuite --save

with yarn:

yarn add rsuite

A simple button element can be brought into your component like this:

1import React from 'react';
2import ReactDOM from 'react-dom';
3import { Button } from 'rsuite';
4
5// import default style
6import 'rsuite/lib/styles/index.less'; // or 'rsuite/dist/styles/rsuite-default.css'
7
8function App() {
9  return <Button>Hello World</Button>;
10}
11
12ReactDOM.render(<App />, document.getElementById('root'));

There are a lot more packages out there and even newer ones coming out every year, I think it is important to know the unique features of these and how easy to read their docs are so that get to building React apps efficiently with them as helpful resources.

Don't forget to check out our React starters

Get started with Strapi by creating a project using a starter or trying our live demo. Also, consult our forum if you have any questions. We will be there to help you.