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 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:
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 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.
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 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:
Learn more → 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:
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 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.
Overall, Blueprint is a good component library for building React apps, especially desktop apps with complex, data-dense interfaces.
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.
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.
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:
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 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.
Reactstrap is essentially an alternative to React Bootstrap. They both serve the same purpose, and their bundle sizes are similar.
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?
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.
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.
Install LogRocket via npm or script tag. LogRocket.init() must be called client-side, not
server-side
$ npm i --save logrocket
// Code:
import LogRocket from 'logrocket';
LogRocket.init('app/id');
// Add to your HTML:
<script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script>
<script>window.LogRocket && window.LogRocket.init('app/id');</script>
Would you be interested in joining LogRocket's developer community?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
Explore use cases for using npm vs. npx such as long-term dependency management or temporary tasks and running packages on the fly.
Validating and auditing AI-generated code reduces code errors and ensures that code is compliant.
Build a real-time image background remover in Vue using Transformers.js and WebGPU for client-side processing with privacy and efficiency.
Optimize search parameter handling in React and Next.js with nuqs for SEO-friendly, shareable URLs and a better user experience.
