Headless CMS

Definitions & benefits

Tools & Concepts

Open source

Features

Authentication

Custom plugins & Marketplace

Webhooks

Multilingual CMS

APIs

Dynamic Zones

User roles & permissions

Content Modeling

Security & Privacy

Use Cases

Ecommerce

Blog

Forum

About Strapi

Life at Strapi

Releases & Roadmap

Events

Community

News

The Tutorials section covers an introduction to Strapi, some advanced technical content, product updates and releases. From basic workaround to in-depth development guides. 

Tutorials

How tos

Get all the latest updates, news and events.

Subscribe to the newsletter 📣

*This article is a guest post by the amazing [**Nwose Lotanna**](https://github.com/viclotana). Nwose is a technical writer and frontend web developer and wrote this blog post through the [Write for the Community](https://strapi.io/write-for-the-community) program.*

<p align="center">
<a href="https://strapi.io/write-for-the-community">
<img src="https://assets.strapi.io/uploads/Join_the_program_498526acbe.svg#small" />
</a>
</p>

According to last year's [state of JavaScript survey](https://2019.stateofjs.com/front-end-frameworks/react/) and this year's, [Stack Overflow devs survey](https://insights.stackoverflow.com/survey/2020/?ref=hackernoon.com#technology-most-loved-dreaded-and-wanted-web-frameworks) React is still the most loved and the most used frontend framework out there. [React](https://strapi.io/integrations/react-cms) 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
---------

![Chakra UI](/uploads/chakra_ui_1fcfd7b86c.png) 

With over 11,000 stars on GitHub [Chakra UI](https://chakra-ui.com/) by [Segun Adebayo](https://twitter.com/thesegunadebayo) 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:

```
npm 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:

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

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

```html
<ButtonGroup spacing={4}>
<Button variantColor="teal" size="xs">
Button
 </Button>
<Button variantColor="teal" size="sm">
Button
</Button>
<Button variantColor="teal" size="md">
Button
</Button>
<Button variantColor="teal" size="lg">
Button
</Button>
</ButtonGroup>
```

React Virtualized
-----------------

![React VirtualizedI](/uploads/react_virtualized_e0bdf2dc49.png) 


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](https://bvaughn.github.io/react-virtualized/#/components/List) 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](https://github.com/bvaughn/react-window) as a great alternative. 

[Learn more about how the two libraries compare here.](https://github.com/bvaughn/react-window#how-is-react-window-different-from-react-virtualized) 

To install virtualized, use npm like this:

```
npm install react-virtualized --save
```

Prime React
-----------

![Prime React](/uploads/prime_react_9a8b14150a.png) 

[Prime React](https://primefaces.org/primereact/showcase/#/setup),  with almost [2,000 stars on GitHub](https://github.com/primefaces/primereact),  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:

```
npm install primereact --save
```


```
npm 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:

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


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

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


React Desktop
-------------

![React Desktop](/uploads/react_desktop_cf50f375c6.png) 

With almost [9,000 stars on GitHub](https://github.com/gabrielbull/react-desktop), [React Desktop](https://reactdesktop.js.org) 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:

```
npm install react-desktop --save
```


React Toolbox
-------------

![React Toolbox](/uploads/react_desktop_cf50f375c6.png) 

[React Toolbox](http://react-toolbox.io/#/install) 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](http://twitter.com/javivelasco), and [Javi Jimenez](http://twitter.com/soyjavi)[.](http://twitter.com/soyjavi)

You can install React Toolbox as an [npm package](https://www.npmjs.org/package/react-toolbox) like this:

```
npm install --save react-toolbox
```


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

```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'react-toolbox/lib/button';
ReactDOM.render(
    <Button label="Hello World!" />,
    document.getElementById('app')
);
```

Reactstrap
----------

![ReactStrap](/uploads/reactstrap_516f257d80.png) 

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](https://reactstrap.github.io/) 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:

```javascript
import React from 'react';
import { Button } from 'reactstrap';
export default (props) => {
  return (
    <Button color="danger">Danger!</Button>
  );

`};
```

React Suite
-----------

![React Suite](/uploads/react_suite_9230ae1110.png) 

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](https://rsuitejs.com) 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:

```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'rsuite';

// import default style
import 'rsuite/lib/styles/index.less'; // or 'rsuite/dist/styles/rsuite-default.css'

function App() {
  return <Button>Hello World</Button>;
}

ReactDOM.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](https://strapi.io/starters)

---

Get started with Strapi by creating a project using a [starter](https://strapi.io/starters) or trying our [live demo](https://strapi.io/demo). Also, consult our [forum](https://forum.strapi.io) if you have any questions. We will be there to help you.
<p align="center">
<a href="https://strapi.io/documentation/developer-docs/latest/getting-started/quick-start.html#_1-install-strapi-and-create-a-new-project">
<img src="https://assets.strapi.io/uploads/Get_Started_e4e026ce55.svg#small" />
</a>
</p>
See you soon!

Strapi let you discover the top 7 React UI packages to use in 2020. Chakra UI, Prime React and others...

The Ecosystem section covers everything related to the world of Headless CMS and Strapi's place in it. 

Ecosystem

Top7_react_UI_Library(1)

You might be also interested in 

7 Top React UI Packages to use in 2020

Nwose is a web developer and Writer. He wrote tens of stories about Vue.js, Typescript, Angular, Strapi, and many other technologies.