Comparing popular React component libraries

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 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.

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

  yarn add antd

Or:

 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).

    import React from 'react';
    import 'antd/dist/antd.css';
    import { Card, Button } from 'antd';

    const AntDesign = () => (
      <Card style={{width: 300}}>
      <h3>Ant Design 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 type="primary">Read more</Button>
      </Card>
    );

    export default AntDesign;

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 and over 341,000 downloads per week on NPM; 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

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.

Material-UI

Material-UI 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 you can use to speed up your development.

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

  yarn add @material-ui/core

Or:

    npm install @material-ui/core

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

    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 and over 1 million downloads per week on NPM; 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

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.

    yarn add react-bootstrap bootstrap

Or:

    npm install react-bootstrap bootstrap

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

    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 stars and more than 559,000 downloads per week on NPM
• Documentation — Documents are beginner-friendly, examples are clear, and you can copy a component’s source code
• Bundle size (minified) — react-bootstrap 112.9kB; bootstrap 61.7kB

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.

    yarn add @blueprintjs/core

Or:

    npm install @blueprintjs/core

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

    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 and more than 107,000 downloads on NPM
• 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

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. 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.

    yarn add semantic-ui-react  semantic-ui-css

Or:

  npm install semantic-ui-react  semantic-ui-css

Next, add this code block to create a card:

    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 GitHub and over 141,000 downloads on NPM
• 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; semantic-ui-css 272.1kB

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.

    yarn add evergreen-ui

Or:

    npm install evergreen-ui

Next, create a card component.

    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 and just over 4,000 downloads on NPM, Evergreen is not as widely used as other component libraries; it is developed and used by Segment
• 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

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.

    yarn add reactstrap

Or:

    npm install reactstrap

Create a card component.

    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 stars, over 256k downloads on NPM
• 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

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.

    yarn add onsenui react-onsenui

Or:

    npm install onsenui react-onsenui

Now create a card component with the following code.

    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, 2,000 downloads on NPM, 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; onsenui 319.3kB

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.