Comparing popular React component libraries
Tags: react, javascript, ui
Published: 2020-03-30 13:57:56

---
title: Comparing popular React component libraries
published: true
date: 2020-03-10 17:30:57 UTC
tags: react,javascript,ui
canonical_url: https://blog.logrocket.com/comparing-popular-react-component-libraries/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/gwfa6358yuvmugi2c5gi.png
---
**Written by [Ibrahima Ndaw](https://blog.logrocket.com/author/ibrahimandaw/)**✏️

React is a JavaScript library for building user interfaces. It has an amazing community that works tirelessly to produce UI components that help speed up the development process and make our lives easier.

In this article, we’ll compare popular React component libraries and evaluate each for popularity, developer experience, readability, documentation, and bundle size to help you choose the right library for your next React project.

## Ant Design

[Ant Design](https://ant.design/docs/react/introduce) is a UI library built entirely in TypeScript. It’s great for building React apps quickly since it has a set of high-quality React components and offers robust support for browsers and [server-side rendering](https://blog.logrocket.com/why-you-should-render-react-on-the-server-side-a50507163b79/).

To see Ant Design in action, install it with one of the following commands.

```jsx
  yarn add antd
```

Or:

```jsx
 npm install antd
```

Next, add the code block below to create a card component (we’ll create a card for each library to more easily compare them).

```jsx
    import React from 'react';
    import { Card, CardActions, CardContent, makeStyles, Button, Typography } from '@material-ui/core';

    const MaterialUI = () => {
      const useStyles = makeStyles({
        root: {
          width: 300,
        },
        title: {
          paddingBottom: '1rem'
        }
      });

      const classes = useStyles();
      return (
    <Card className={classes.root}>
    <CardContent>
    <Typography className={classes.title} variant="h5" component="h1">
    Material UI card
    </Typography>
        <Typography variant="body2" component="p">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        </Typography>
      </CardContent>
      <CardActions>
      <Button variant="contained" color="primary">
      Read more
    </Button>
      </CardActions>
    </Card>
    ) };

    export default MaterialUI
```

As you can see here, Ant Design offers a strong platform for creating components. They are well-named and readable in general, and the props received by elements are quite clear. The components can also be customized to fit our design.

Let’s see how Ant Design stacks up against other React component libraries:

- **Popularity**— 56.4k stars on [GitHub](https://github.com/ant-design/ant-design) and over 341,000 downloads per week on [NPM](https://www.npmjs.com/package/antd); used by multinational companies such as Alibaba, Baidu, and more
- **Documentation**— Well-written and beginner-friendly; you can copy the source code of a given component to better preview it on CodePen, CodeSandbox, or StackBlitz
- **Bundle** **size (minified)**— [antd 2.2mb](https://bundlephobia.com/result?p=antd@3.26.11)

As you can see, Ant Design is very popular, especially in China, and its documentation is comprehensive. However, the bundle is quite big compared to other React components libraries.

[![LogRocket Free Trial Banner](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/f760c-1gpjapknnuyhu8esa3z0jga.png?resize=1200%2C280&ssl=1)](https://logrocket.com/signup/)

## Material-UI

[Material-UI](https://dev.to/bnevilleoneill/the-material-ui-grid-system-5229) is the most popular React UI component library. It’s inspired by and built with Google’s Material Design and has a lot of prebuilt React components, which can help you create React apps in no time. Better yet, it has some [prebuilt themes](https://material-ui.com/store/) you can use to speed up your development.

To install Material-UI, run one of the following two commands on your terminal.

```jsx
  yarn add @material-ui/core
```

Or:

```jsx
    npm install @material-ui/core
```

Next, add the following code black to create a card component with Material UI.

```jsx
    import React from 'react';
    import { Card, CardActions, CardContent, makeStyles, Button, Typography } from '@material-ui/core';

    const MaterialUI = () => {
      const useStyles = makeStyles({
        root: {
          width: 300,
        },
        title: {
          paddingBottom: '1rem'
        }
      });

      const classes = useStyles();
      return (
    <Card className={classes.root}>
    <CardContent>
    <Typography className={classes.title} variant="h5" component="h1">
    Material UI card
    </Typography>
        <Typography variant="body2" component="p">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        </Typography>
      </CardContent>
      <CardActions>
      <Button variant="contained" color="primary">
      Read more
    </Button>
      </CardActions>
    </Card>
    ) };

    export default MaterialUI
```

Unlike Ant Design, Material-UI offers built-in methods to style components. `makeStyles()` is useful, especially when your code starts to get big; it helps you find the element to style more quickly and makes the code more readable. The downside is that readability may degrade as a component grows. But overall, Material-UI is a strong, highly customizable library.

- **Popularity** — 54.6k stars on [GitHub](https://github.com/mui-org/material-ui) and over 1 million downloads per week on [NPM](https://www.npmjs.com/package/@material-ui/core); used by companies such as NASA, Netflix, Amazon, etc.
- **Documentation** — Easy to understand and beginner-friendly; you can find the source code of a given component in the docs and even edit it in CodeSandbox
- **Bundle size (minified)** — [@material-ui/core 314.5kB](https://bundlephobia.com/result?p=@material-ui/core@4.9.3)

Compared to Ant Design, Material UI has a very small bundle size. It also enjoys popularity and a great ecosystem and merits consideration for your next React project.

## React Bootstrap

React Bootstrap is a dream come true for developers who prefer Bootstrap because it brings the power and simplicity of Bootstrap to React. It includes a plethora of prebuilt, pure React components with no third-party libraries. In general, React Bootstrap offers most of the same functionalities as Bootstrap.

Run one of the following commands in your terminal to install React Bootstrap.

```jsx
    yarn add react-bootstrap bootstrap
```

Or:

```jsx
    npm install react-bootstrap bootstrap
```

Next, as before, add this code block to create a card:

```jsx
    import React from 'react';

    import 'bootstrap/dist/css/bootstrap.min.css';
    import { Button, Card } from 'react-bootstrap';

    const ReactBootstrap = () => (
    <Card style={{ width: 300 }}>
      <Card.Body>
        <Card.Title>React Bootstrap card</Card.Title>
        <Card.Text>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        </Card.Text>
        <Button variant="primary">Read more</Button>
      </Card.Body>
    </Card>
    )

    export default ReactBootstrap;
```

React Bootstrap extends Bootstrap style to React Components. Prior experience with Bootstrap helps but is not required. The code is quite readable and the component names are easy to retain.

Now for the report card:

- **Popularity** — 17k [GitHub](https://github.com/react-bootstrap/react-bootstrap) stars and more than 559,000 downloads per week on [NPM](https://www.npmjs.com/package/react-bootstrap)
- **Documentation** — Documents are beginner-friendly, examples are clear, and you can copy a component’s source code
- **Bundle** **size (minified)** — [react-bootstrap 112.9kB](https://bundlephobia.com/result?p=react-bootstrap@1.0.0-beta.16); [bootstrap 61.7kB](https://bundlephobia.com/result?p=bootstrap@4.4.1)

React Bootstrap needs the Bootstrap library as a dependency. However, the bundle size is small. If you like Bootstrap, React Bootstrap is definitely something to consider for your React apps.

## Blueprint

Blueprint is a UI library that is mostly used for desktop apps because it’s optimized and built for data-dense interfaces. You can still use it to build web apps, but you won’t get the full power of Blueprint.

Install Blueprint and create a card by running one of the following commands on the terminal.

```jsx
    yarn add @blueprintjs/core
```

Or:

```jsx
    npm install @blueprintjs/core
```

To create a card component, add the following lines of code.

```jsx
    import React from 'react';
    import "@blueprintjs/core/lib/css/blueprint.css"
    import { Button, Card, Classes } from "@blueprintjs/core";


    const Blueprint = () => (
    <Card style={{width: 300}} className={Classes.CARD}>
        <h3>Blueprint card</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea</p>
        <Button intent="primary" text="Read more" className={Classes.BUTTON} />
    </Card>
      );

    export default Blueprint;
```

You can still use the same component naming convention with Blueprint. You can also take advantage of CSS utilities to style the components, which helps to increase code readability.

Now let’s analyze Blueprint’s popularity and code quality.

- **Popularity** — 15k stars on [GitHub](https://github.com/palantir/blueprint) and more than 107,000 downloads on [NPM](https://www.npmjs.com/package/@blueprintjs/core)
- **Documentation** — Documents are interactive and you can copy the source code of a given component from the docs or GitHub
- **Bundle** **size (minified)** — [@blueprintjs/core 588.2kB](https://bundlephobia.com/result?p=@blueprintjs/core@3.23.1)

Overall, Blueprint is a good component library for building React apps, especially desktop apps with complex, data-dense interfaces.

## Semantic UI

Unlike Blueprint, Semantic UI was designed for crafting React apps. It has some prebuilt themes you can use either by installing it or with [Create React App](https://blog.logrocket.com/getting-started-with-create-react-app-d93147444a27/). Semantic UI components are also highly responsive and it enjoys pretty good browser support to boot.

Let’s create a card component with Semantic UI by running one of the following commands on the terminal.

```jsx
    yarn add semantic-ui-react semantic-ui-css
```

Or:

```jsx
  npm install semantic-ui-react semantic-ui-css
```

Next, add this code block to create a card:

```jsx
    import React from 'react'

    import 'semantic-ui-css/semantic.min.css';
    import { Card, Button } from 'semantic-ui-react'

    const SemanticUI = () => ( 
      <Card style={{width: 300}}>
        <Card.Content>
          <Card.Header>Semantic UI</Card.Header>
          <Card.Description>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
          </Card.Description>
          <Button primary>Read more</Button>
        </Card.Content>
      </Card>
    )

    export default SemanticUI
```

Creating components with Semantic UI is quite similar to doing so in React Bootstrap, except for the way props are passed down. The component is also readable and easy to understand.

Let’s see how Semantic UI’s features stack up.

- **Popularity** — 10.9k stars on [Git](https://github.com/Semantic-Org/Semantic-UI-React)[H](https://github.com/Semantic-Org/Semantic-UI-React)[ub](https://github.com/Semantic-Org/Semantic-UI-React) and over 141,000 downloads on [NPM](https://www.npmjs.com/package/semantic-ui-react)
- **Documentation** — Documentation is great; Semantic UI provides the needed code to build a component, and you can even preview it on CodeSandbox
- **Bundle size (minified)** — [semantic-ui-react 312kB](https://bundlephobia.com/result?p=semantic-ui-react@0.88.2); [semantic-ui-css 272.1kB](https://bundlephobia.com/result?p=semantic-ui-css@2.4.1)

The Semantic UI React library needs the Semantic UI CSS package to style a component properly. While this will add some KB on your project, the bundle size remains small.

## Evergreen

If you’re looking for a React UI component library with a low-level, minimalistic design, you will enjoy Evergreen. It includes several utility components you can use to build a complete React component, and it’s well-suited for enterprise web apps because it is flexible and more customizable than most libraries.

Let’s install Evergreen by running one of the following two commands in the terminal.

```jsx
    yarn add evergreen-ui
```

Or:

```jsx
    npm install evergreen-ui
```

Next, create a card component.

```jsx
    import React from 'react';
    import { Pane, Text, Button, Heading } from 'evergreen-ui'


    const Evergreen = () => (
        <Pane
        display="flex"
        alignItems="center"
        padding={16}
        justifyContent="center"
        flexDirection="column"
        border="default"
        width={300}>
        <Heading is="h1">Evergreen Card</Heading>
        <Text marginY={10}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea</Text>
        <Button appearance="primary">Read more</Button>
      </Pane>

    );

    export default Evergreen;
```

As you can see, the method of creating cards and some of the names have changed. That’s just how Evergreen works; it provides minimalistic components that can be extended to fit your design systems.

As for the specs:

- **Popularity** — With 9.1k stars on [GitHub](https://github.com/segmentio/evergreen) and just over 4,000 downloads on [NPM](https://www.npmjs.com/package/evergreen-ui), Evergreen is not as widely used as other component libraries; it is developed and used by [Segment](https://segment.com/)
- **Documentation** — Documentation is well-explained and it’s easy to find the source code of a given component
- Bundle size (minified) — [evergreen-ui 751.2kB](https://bundlephobia.com/result?p=semantic-ui-react@0.88.2)

At the end of the day, Evergreen is a good React component library with a relatively small bundle size, myriad prebuilt components, and a low-level design that can be customized to fit your needs.

## Reactstrap

Reactstrap is similar to React Bootstrap except that it doesn’t depend on Bootstrap to work properly. However, Reactstrap also introduces Bootstrap style to React components.

To see Reactstrap in action, running one of the following commands.

```jsx
    yarn add reactstrap
```

Or:

```jsx
    npm install reactstrap
```

Create a card component.

```jsx
    import React from 'react';
    import {
      Card, CardText, CardBody,
      CardTitle, Button
    } from 'reactstrap';

    const Reactstrap = () => (
          <Card style={{width: 300}}>
            <CardBody>
              <CardTitle>Reactstrap Card</CardTitle>
              <CardText>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea</CardText>
              <Button color="primary">Read more</Button>
            </CardBody>
          </Card>
      );

    export default Reactstrap;
```

The syntax is similar to React Bootstrap, but Reactstrap uses camel case to name components instead of dots. The code is easy to understand and readable.

- **Popularity** — 8.8k [GitHub](https://github.com/reactstrap/reactstrap) stars, over 256k downloads on [NPM](https://www.npmjs.com/package/reactstrap)
- **Documentation** — Docs are well-explained and it’s easy to find the source code of a given component; also includes some prebuilt themes you can use to streamline your development
- **Bundle size (minified)** — [reactstrap 150.4kB](https://bundlephobia.com/result?p=reactstrap@8.4.1)

Reactstrap is essentially an alternative to React Bootstrap. They both serve the same purpose, and their bundle sizes are similar.

## Onsen UI

Onsen UI is a bit different from the previous libraries we’ve examined. Because it’s built with a mobile-first design in mind, Onsen UI is mostly used to build cross-platform mobile web apps.

Install Onsen UI by running one of the following two commands.

```jsx
    yarn add onsenui react-onsenui
```

Or:

```jsx
    npm install onsenui react-onsenui
```

Now create a card component with the following code.

```jsx
    import React from 'react';
    import 'onsenui/css/onsenui.css';
    import 'onsenui/css/onsen-css-components.css';
    import { Card, Button } from 'react-onsenui';


    const OnsenUI = () => (
      <Card style={{width: 300}}> 
      <h3>Onsen UI card</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea</p>
        <Button modifier="cta">Read more</Button>
      </Card>
    );

    export default OnsenUI;
```

Despite its mobile design, the code is somewhat similar to most of the component libraries we’ve compared. Components and props are easy to understand and well-named.

How does Onsen UI compare in terms of popularity, documentation quality, and bundle size?

- **Popularity** — With 7.8k stars on [GitHub](https://github.com/OnsenUI/OnsenUI), 2,000 downloads on [NPM](https://www.npmjs.com/package/react-onsenui), Onsen UI is not widely used
- **Documentation** — Relatively weak compared to other libraries. Although there is a kind of playground, the code is not provided, and it’s hard to understand components due to the missing examples. The documentation is definitely not beginner-friendly
- **Bundle size (minified)** — [react-onsenui 48kB](https://bundlephobia.com/result?p=onsenui@2.10.10); [onsenui 319.3kB](https://bundlephobia.com/result?p=onsenui@2.10.10)

Onsen UI can be used for all kinds of React Apps, but it really shines when developing a React app with a mobile-first approach.

## Conclusion

No matter what type of project you’re working on, there are numerous UI component libraries that can help you craft useful, feature-rich React apps quickly and easily. Most are customizable and include useful prebuilt components. Even better, some UI libraries provide prebuilt themes you can use to whip up a website in no time. Hopefully, this comparison will help you choose the right library for your next React project.

* * * 
## Full visibility into production React apps 

Debugging React applications can be difficult, especially when users experience issues that are difficult to reproduce. If you’re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, [try LogRocket.](https://www2.logrocket.com/react-performance-monitoring)

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/eq752g8qhbffxt3hp9t4.png)

[LogRocket](https://www2.logrocket.com/react-performance-monitoring) is like a DVR for web apps, recording literally everything that happens on your React app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app's performance, reporting with metrics like client CPU load, client memory usage, and more.

The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.

Modernize how you debug your React apps — [start monitoring for free.](https://www2.logrocket.com/react-performance-monitoring)
* * *

The post [Comparing popular React component libraries](https://blog.logrocket.com/comparing-popular-react-component-libraries/) appeared first on [LogRocket Blog](https://blog.logrocket.com).