TheLazy.Dev
Portfolio GitHub

Blog

react |javascript |ui

Comparing popular React component libraries

bnevilleoneill

Brian Neville-O'Neill

Posted on March 30, 2020

Comparing popular React component libraries

Written by Ibrahima Ndaw✏️

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
Enter fullscreen mode Exit fullscreen mode

Or:

 npm install antd
Enter fullscreen mode Exit fullscreen mode

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 { 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
Enter fullscreen mode Exit fullscreen mode

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.

LogRocket Free Trial Banner

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
Enter fullscreen mode Exit fullscreen mode

Or:

    npm install @material-ui/core
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Or:

    npm install react-bootstrap bootstrap
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Or:

    npm install @blueprintjs/core
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Or:

  npm install semantic-ui-react semantic-ui-css
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Or:

    npm install evergreen-ui
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Or:

    npm install reactstrap
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Or:

    npm install onsenui react-onsenui
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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.

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.

Alt Text

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

The post Comparing popular React component libraries appeared first on LogRocket Blog.

💖 💪 🙅 🚩
bnevilleoneill
Brian Neville-O'Neill

Posted on March 30, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

How to Set Up Next.js Project
nextjs How to Set Up Next.js Project

June 11, 2024

Boost User Experience with HTML autocomplete Attribute for Form Inputs
javascript Boost User Experience with HTML autocomplete Attribute for Form Inputs

June 3, 2024

How to use React-Slick Slider Library
react How to use React-Slick Slider Library

May 25, 2024

Getting Started with React-Helmet: A Beginner's Guide
react Getting Started with React-Helmet: A Beginner's Guide

May 10, 2024

20 React libraries every developer should have
reactlibraries 20 React libraries every developer should have

November 4, 2023