React-Bootstrap, Material UI and Chakra UI

Oct. 14, 2021, 12:50 p.m.
Bootstrap React · 11 min read
React-Bootstrap, Material UI and Chakra UI
Last Modified: Oct. 15, 2021, 11:34 a.m.

Here are 3 React UI component libraries that are easy to use and are easily accessible. I've provided code snippets and screenshots of some the basic components so you can get a feel for each framework.

 

React-Bootstrap

Version 2.0.0-rc.0 (Bootstrap 5.1)

React Bootstrap v2

What is React-Bootstrap? 

React-Bootstrap is the popular front-end framework Bootstrap rebuilt for React.

It comes with all of the basic Bootstrap components "built from scratch as true React component[s]". 

 

Installation

Command Prompt

npm install react-bootstrap@next bootstrap@5.1.1
yarn add react-bootstrap@next bootstrap@5.1.1

Install react-bootstrap using npm or yarn in addition to Bootstrap's source Sass and JavaScript files. 

 

Components

Here is a list of all React-Bootstrap components. They look and function exactly like the traditional Bootstrap components. 

  • Alerts
  • Accordion
  • Badge
  • Breadcrumb
  • Buttons
  • Button Group
  • Cards
  • Carousel
  • Close Button
  • Dropdowns
  • Figures
  • Forms
  • Input Group
  • Images
  • List Group
  • Modal
  • Nav
  • Navbar
  • Offcanvas
  • Overlays
  • Pagination
  • Placeholder
  • Popovers
  • Progress
  • Spinners
  • Table
  • Tabs
  • Tooltips
  • Toasts

 

 

Alerts

React Bootstrap Alerts

[
  'primary',
  'secondary',
  'success',
  'danger',
  'warning',
  'info',
  'light',
  'dark',
].map((variant, idx) => (
  <Alert key={idx} variant={variant}>
    This is a {variant} alert!
  </Alert>
));

Alerts are available in 8 color variations. Additional content includes Alert.Link and Alert.Heading are available. 

 

Accordion

React Bootstrap Accordion

<Accordion defaultActiveKey="0">
  <Accordion.Item eventKey="0">
    <Accordion.Header>Accordion Item #1</Accordion.Header>
    <Accordion.Body>
      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
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
      est laborum.
    </Accordion.Body>
  </Accordion.Item>
  <Accordion.Item eventKey="1">
    <Accordion.Header>Accordion Item #2</Accordion.Header>
    <Accordion.Body>
      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
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
      est laborum.
    </Accordion.Body>
  </Accordion.Item>
</Accordion>

Accordions are vertically stacked, collapsible cards. You can start with the default, open accordion or a fully collapsed state.

 

Badge

React Bootstrap badge

[
  'primary',
  'secondary',
  'success',
  'danger',
  'warning',
  'info',
  'light',
  'dark',
].map((bg, idx) => (
  <Badge key={idx} bg={bg}>
    {bg}
  </Badge>
))

Badges are also available in 8 background color variations. Change the color using the bg prop.  There is also a pill modifier class to make the badges more rounded on the edges. 

Note that badges scale to match the size of their parent component. 

 

Buttons

React Bootstrap Buttons

[
  'primary',
  'secondary',
  'success',
  'danger',
  'warning',
  'info',
  'light',
  'dark',
].map((variant, idx) => (
  <Button key={idx} variant={variant}>
    {variant}
  </Button>
));

Button colors are changed using the variant prop. Each color can also be an outline-* variant (i.e. variant="outline-primary"). Add a size prop (lg and sm) for additional sizes besides the default medium.

 

Card

React Bootstrap Card

<Card style={{ width: '18rem' }}>
  <Card.Img variant="top" src="holder.js/100px180" />
  <Card.Body>
    <Card.Title>Card Title</Card.Title>
    <Card.Text>
      Some quick example text to build on the card title and make up the bulk of
      the card's content.
    </Card.Text>
    <Button variant="primary">Go somewhere</Button>
  </Card.Body>
</Card>

React-Bootstrap cards can contain an Card.Img, Card.Link, Card.Body, Card.Title, Card.Text, and a Button. Card.Header and Card.Footer components are also available.

 

Modal

React Bootstrap Modal

<Modal.Dialog>
  <Modal.Header closeButton>
    <Modal.Title>Modal title</Modal.Title>
  </Modal.Header>

  <Modal.Body>
    <p>Modal body text goes here.</p>
  </Modal.Body>

  <Modal.Footer>
    <Button variant="secondary">Close</Button>
    <Button variant="primary">Save changes</Button>
  </Modal.Footer>
</Modal.Dialog>

Modals are called on set actions such as a button click. Modal.Header, Modal.Title, Modal.Body, and Modal.Footer are all components used to build the Modal.

The modal can also be vertically centered or changed with the size prop. 

 

Usage

react > src > App.js

import 'bootstrap/dist/css/bootstrap.min.css';
import InfoModal from "./components/InfoModal.js";


function App() {
    return (
      <div>
        <InfoModal />
      </div>
    );   
}


export default App;

React-Bootstrap isn't shipped with an included CSS because it doesn't depend on a precise version of Bootstrap. 

But you do need to add the stylesheet to use the components.

Import the minified version of the Bootstrap stylesheet in your src >index.js or App.js file. 

 

react > src > components > InfoModal.js

import React, {useState} from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import {Modal, Button} from 'react-bootstrap';


export default function InfoModal() {
  const [show, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);
  return (
    <>
      <Button className="nextButton" onClick={handleShow}>
        Open Modal
      </Button>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

Within your Component file, you have to import your component from react-bootstrap. You have two options:

Import a single component (recommended)

import Modal from 'react-bootstrap/Modal';

Or import the entire library

import { Modal } from 'react-bootstrap';

React-Bootstrap recommends the former as it significantly reduces the amount of codes sent to the client.

Then you can call your component below the import within your Component. If you're interested in learning more about the React-Bootstrap Modal, checkout How To Make A React Bootstrap Modal.

 

Material-UI

Version 5.0.3

Material UI

 

What is Material-UI? 

Material-UI is considered one of the most popular React UI frameworks. It's a simple library where you can start with Material Design or build your own design system. 

 

Installation

Command Prompt

npm install @mui/material @emotion/react @emotion/styled
yarn add @mui/material @emotion/react @emotion/styled

Install MUI using npm or yarn. 

 

 

Material UI Components

Components are broken into 10 categories:

  • Inputs
  • Data display
  • Feedback
  • Surfaces
  • Navigation
  • Layout
  • Utils
  • Data Grid
  • Lab
  • Date/Time

 

However there are over 60 components to chose from. I'll cover Alerts, Accordion, Badge, Buttons, Cards, and Modal. 

 

Material UI Alerts

Material UI Alerts

[
  'error',
  'warning',
  'info',
  'success',
].map((severity, idx) => (
  <Alert key={idx} severity={severity}>
   This is a {severity} alert!
  </Alert>
));

The default alerts can contain icons, have two variants - outlined and filled and contain a AlertTitle component. However you can change the color by adding the color prop.

 

Material UI Accordion

Material UI accordion

<Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel1a-content"
          id="panel1a-header"
        >
          <Typography>Accordion 1</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
            malesuada lacus ex, sit amet blandit leo lobortis eget.
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel2a-content"
          id="panel2a-header"
        >
          <Typography>Accordion 2</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
            malesuada lacus ex, sit amet blandit leo lobortis eget.
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion disabled>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel3a-content"
          id="panel3a-header"
        >
          <Typography>Disabled Accordion</Typography>
        </AccordionSummary>
      </Accordion>

You will need to also install the Material icons package it use the expandIcon.

 

Material UI Badge

Material UI badges

[
  'primary',
  'secondary',
  'error',
  'warning',
  'info',
  'success',
].map((color, idx) => (
  <Badge key={idx} badgeContent={idx} color={color}>
    <MailIcon color="action" />
  </Badge>
));

The badge is a small colored circle located to the top-right of its child. The example above is a badge located on a MailIcon

 

Material UI Buttons

Material UI Buttons

[
  'primary',
  'secondary',
  'error',
  'warning',
  'info',
  'success',
].map((color, idx) => (
  <Button key={idx} variant="contained" color={color}>
    {color}
  </Button>
));

Change the Button colors with the color prop. Use the size prop and specify small, medium, or large. And change the variant prop with text, contained, and outlined props. 

 

Material UI Card

Material UI Card

    <Card sx={{ maxWidth: 245 }}>
      <CardMedia
        component="img"
        height="140"
        image="holder.js/100px180"
        alt="green iguana"
      />
      <CardContent>
        <Typography gutterBottom variant="h5" component="div">
        Card Title
        </Typography>
        <Typography variant="body2" color="text.secondary">
        Some quick example text to build on the card title and make up the bulk of
      the card's content.
        </Typography>
      </CardContent>
      <CardActions>
        <Button size="small">Share</Button>
        <Button size="small">Learn More</Button>
      </CardActions>
    </Card>

Material UI cards can contain CardMedia, Typography, CardActions, and CardContent.

 

Material UI Modal

Material UI Modal

<Modal
    open={open}
    onClose={handleClose}
    aria-labelledby="modal-modal-title"
    aria-describedby="modal-modal-description"
>
    <Box sx={style}>
      <Typography id="modal-modal-title" variant="h6" component="h2">
        Text in a modal
      </Typography>
      <Typography id="modal-modal-description" sx={{ mt: 2 }}>
        Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
      </Typography>
        </Box>
</Modal>

Modals are made using the Modal, Box, and Typography component. You will need to add hooks to the modal to add the functionality. An example is show in the next section.

 

Material UI Usage

react > src > components > InfoModal.js

import React, {useState} from "react";
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import Modal from '@mui/material/Modal';

const style = {
  position: 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: 400,
  bgcolor: 'background.paper',
  border: '2px solid #000',
  boxShadow: 24,
  p: 4,
};

export default function InfoModal() {
  const [open, setOpen] = React.useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  return (
    <div>
      <Button onClick={handleOpen}>Open modal</Button>
      <Modal
        open={open}
        onClose={handleClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
      >
        <Box sx={style}>
          <Typography id="modal-modal-title" variant="h6" component="h2">
            Text in a modal
          </Typography>
          <Typography id="modal-modal-description" sx={{ mt: 2 }}>
            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
          </Typography>
        </Box>
      </Modal>
    </div>
  );
}

Within your Component file, you have to import your component from mui/material.

Import a single component.

import Modal from '@mui/material/Modal';

Then you can call your component below the import within your Component. 

 

 

 

Chakra UI

Version 1.6.9

Chakra UI

 

What is Chakra UI? 

Chakra UI is React component library to that provides theming, layout, forms, data display, feedback, typography, overlay, disclosure, navigation, media, and icons.

 

Chakra UI Installation

Command Prompt

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

 

Chakra UI Components

Chakra offers the following types of components:

  • Layout
  • Forms
  • Data display
  • Feedback
  • Typography
  • Overlay
  • Disclosure
  • Navigation
  • Media and Icons

 

Chakra UI  Alert

Chakra UI Alerts

[
  'info',
  'warning',
  'success',
  'error',
].map((status, idx) => (
  <Alert key={idx} status={status}>
    This is a {status} alert—check it out!
  </Alert>
));

The alert supports infowarningsuccess, and error. There are also 4 variant styles that are subtlesolidleft-accent, and top-accent. Just add the variant props the Alert component. 

 

Chakra UI  Accordion

Chakra Accordion UI

<Accordion>
  <AccordionItem>
    <h2>
      <AccordionButton>
        <Box flex="1" textAlign="left">
          Section 1 title
        </Box>
        <AccordionIcon />
      </AccordionButton>
    </h2>
    <AccordionPanel pb={4}>
      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
      commodo consequat.
    </AccordionPanel>
  </AccordionItem>

  <AccordionItem>
    <h2>
      <AccordionButton>
        <Box flex="1" textAlign="left">
          Section 2 title
        </Box>
        <AccordionIcon />
      </AccordionButton>
    </h2>
    <AccordionPanel pb={4}>
      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
      commodo consequat.
    </AccordionPanel>
  </AccordionItem>
</Accordion>

The accordion is added using the AccordionPanel, AccordionItem, AccordionButton, AccordionIcon, and Box nested in the Accordion component.

 

Chakra UI Badge

Chakra Badges

[
  'red',
  'orange',
  'yellow',
  'green',
  'teal',
  'blue',
  'cyan',
  'purple',
  'pink',
  'black',
  'white',
].map((colorScheme, idx) => (
  <Badge key={idx} colorScheme={colorScheme}>
    {colorScheme}
  </Badge>
));

The default badge is gray but the colorScheme can be updated based on the theme.colors.

 

Chakra UI Buttons

Chakra UI buttons

[
  'red',
  'orange',
  'yellow',
  'green',
  'teal',
  'blue',
  'cyan',
  'purple',
  'pink',
  'black',
  'white',
].map((colorScheme, idx) => (
  <Button key={idx} colorScheme={colorScheme}>
    {colorScheme}
  </Button>
));

The Chakra buttons size is changed using the size prop, setting the value to xs, sm, md, and lg. The variant prop is also available with values solid, ghost, outline, and link.

 

Chakra UI Card

Chakra UI card

<Box maxW="sm" borderWidth="1px" borderRadius="lg" overflow="hidden">
      <Image src="holder.js/100px180" />

      <Box p="6">
        <Box
          mt="1"
          fontWeight="semibold"
          as="h4"
          lineHeight="tight"
          isTruncated
        >
          Card Title
        </Box>

        <Box display="flex" mt="2" alignItems="center">
          <Box as="span" ml="2" color="gray.600" fontSize="sm">
          Some quick example text to build on the card title and make up the bulk of
      the card's content.
          </Box>
        </Box>
      </Box>
</Box>

Create a card in Chakra UI using a couple of Box components and an Image component.

 

Chakra UI Modal

Chakra UI Modal

<Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Modal Title</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            Modal body text goes here.
          </ModalBody>

          <ModalFooter>
            <Button colorScheme="blue" mr={3} onClick={onClose}>
              Close
            </Button>
            <Button variant="ghost">Secondary Action</Button>
          </ModalFooter>
        </ModalContent>
</Modal>

The modal has a ModalOverlay, ModalContent, ModalHeader, ModalFooter, and ModalBody, and ModalCloseButton component.

 

 

Usage

react > src > App.js

import { ChakraProvider } from "@chakra-ui/react"
import InfoModal from "./components/InfoModal.js";


function App() {
    return (
      <ChakraProvider>
        <InfoModal />
      </ChakraProvider>
    );   
}


export default App;

Set up the <ChakraProvider> at the root of your application, App.js.

Then nest your component in the provider tags.

 

react > src > components > InfoModal.js

import * as React from 'react';
import {
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalFooter,
  ModalBody,
  ModalCloseButton,
  Button,
  useDisclosure,
} from "@chakra-ui/react"

export default function InfoModal() {
  const { isOpen, onOpen, onClose } = useDisclosure()
  return (
    <>
      <Button onClick={onOpen}>Open Modal</Button>

      <Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Modal Title</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            Modal body text goes here.
          </ModalBody>

          <ModalFooter>
            <Button colorScheme="blue" mr={3} onClick={onClose}>
              Close
            </Button>
            <Button variant="ghost">Secondary Action</Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </>
  )
}

Within your Component file, you have to import your components from chakra-ui/react.

Import the entire library and each necessary component.

import {
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalFooter,
  ModalBody,
  ModalCloseButton,
  Button,
  useDisclosure,
} from "@chakra-ui/react"

Then you can call your component below the import within your Component. 

 

Other React components frameworks include Evergreen, Blueprint, Semantic UI, React Toolbox but I chose to cover the ones above given the number of components provided and popularity.






Post a Comment
Join the community

0 Comments
0
Jaysha
Written By
Jaysha
Hello! I enjoy learning about new CSS frameworks, animation libraries, and SEO.