Top 3 React Styling Libraries and How to Use Them

Design is an integral aspect of creating a brand and engaging users in web applications. Front End developers focus on two fundamental aspects of the user interface- the functionality and the design. Most applications on the modern web consist of various complex components and long scripts of code. Thanks to the highly talented individuals behind the following component libraries, developers are able to integrate responsive, functional, and conventionally appealing components to their React applications without the hassle of writing long CSS and Javascript files.

In order to begin our new design journey, let’s create a React application utilizing the following command:

npx create-react-app style-wiz

1. Material UI (Google)

Material UI is an open-source React component project that was initiated in 2014. The Material UI component library incorporates Google’s Material Design and is one of the most highly rated React component libraries on Github.

Getting Started

Let’s begin by installing the component library:

// with npm
npm install @material-ui/core

// with yarn
yarn add @material-ui/core

Navigating Through the Docs

Fortunately, Material UI is well documented and quite easy to navigate. Once we’ve installed the library, let's navigate over to the components documentation. To remain consistent across the various component libraries, we will be using the Button component.

You can find a wide range of buttons and button types on the Button component page. Additionally, you can view the specific code that is being utilized to import these buttons. I’m going to be using the Secondary contained button.

Implementation

Material UI components must be imported separately, for example, to import a Button component we will be using the following line of code:

import Button from '@material-ui/core/Button';

Looking at the documentation, all we need to utilize the secondary contained Button is to pass down a variant and color prop to the Button component. Let’s see what happens!

<Button variant="contained" color="secondary">
    Material UI </Button>

Beautiful.

2. React Bootstrap

The infamous CSS Bootstrap component library was brought to React with the fairly new React Bootstrap component library. Similar to Material UI, React Bootstrap is well documented and utilizes the same importation method.

Getting Started

npm install react-bootstrap bootstrap

We will also need to import the CSS styling library into our application. I’ve placed mine in App.js which is at the top of my component hierarchy.

import 'bootstrap/dist/css/bootstrap.min.css';

Navigating Through the Docs

Navigate to the components tab at the top of the React Bootstrap documentation here. We’ll be checking out the Button component.

The code and button types are provided on the documentation page.

Implementation

Import each React component separately. We will be importing the Button component:

import Button from 'react-bootstrap/Button';

// or less ideally
import { Button } from 'react-bootstrap';

The React Button component simply takes in a variant type. Let’s implement the component, I’ll be using an outlined button in the “Info” color. (light blue):

<Button variant=”outline-info”> React Bootstrap </Button>

3. Ant Design

Created by Chinese conglomerate Alibaba, Antd is a React component library that allows you to utilize easy-to-implement components. Unlike Bootstrap and Material UI, Ant Design follows a different conventional styling approach based around popular eastern web design.

Getting Started

//with npm
$ npm install antd
//with yarn
$ yarn add antd

Antd will also require the importing of a CSS stylesheet.

import 'antd/dist/antd.css'; 
// or 'antd/dist/antd.less'

Navigating Through the Docs

At the top of the Ant Design page, find the Components tab in the navigation bar. Ant Design also includes its own icon library, Typography, and a section entailing elements of design and their utilization. Check it out!

Let’s navigate over the Button component. There we will find multiple different button styles and the example code used to implement them.

Implementation

Ant Design requires the import of components through the following notation:

import { Button } from 'antd';

The Antd button takes in various props, you can find a list of them in the documentation here. we will be utilizing the “type” and “size” prop to create a large primary button:

<Button type="primary" size="large"> Ant Design </Button>

Summary

We just learned three new component libraries and their implementation! This tutorial is a very brief top-level overview of these libraries and their components, it’s now time for the real fun — digging in! Let’s take a look at what we’ve created side-by-side.

Nice! It’s also important to keep in mind that these components can be used as blueprints, we can customize the color, style, and content with our own CSS/SCSS stylesheets. Let’s get creating!