MDB React & Gatsby JS integration

MDB React & Gatsby JS integration

MDB React integration with Gatsby JS. Installation, various examples of implementation and much more.

Lets see how to integrate Gatsby.js with MDB 5 across our layout, components, and utilities.

Creating Gatsby JS app


Before starting the project make sure to install Node LTS (14.15 or newer).

Step 1

Create a new Gatsby app.

You can learn more about Gatsby in their official documentation.

      npm init gatsby

Answear to few questions, here is an example for our tutorial

  • name of your site - My Gatsby Site
  • folder name - gatsbyjs/my-gatsby-site
  • choose between JavaScript or TypeScript - JavaScript
  • CMS - No (or I'll add it later)
  • styling system - No (or I'll add it later)
  • installation of other plugins - Done

Step 2

Navigate to app's directory.

      cd my-gatsby-site

MDB installation

Step 1

Setup MDB.

      npm i mdb-react-ui-kit

Font Awesome

Install Font Awesome.

        npm i @fortawesome/fontawesome-free

CSS import

Add the following lines in pages/index.js file.

        import 'mdb-react-ui-kit/dist/css/mdb.min.css'
        import "@fortawesome/fontawesome-free/css/all.min.css"

Step 2

Launch your app.

      npm run develop


To use MDB React inside your Gatsby app simply navigate to pages/index.js and try the following example.

    import * as React from "react";
    import "mdb-react-ui-kit/dist/css/mdb.min.css";
    import "@fortawesome/fontawesome-free/css/all.min.css";
    import { MDBCarousel, MDBCarouselItem } from "mdb-react-ui-kit";

    const pageStyles = {
      color: "#232129",
      padding: 96,
      fontFamily: "-apple-system, Roboto, sans-serif, serif",
    const headingStyles = {
      marginTop: 0,
      marginBottom: 64,
      maxWidth: 1080,
    const headingAccentStyles = {
      color: "#663399",

    const IndexPage = () => {
      return (
        <main style={pageStyles}>
          <h1 style={headingStyles}>
            <br />
            <span style={headingAccentStyles}>
              β€” you just integrated MDB React with Gatsby! πŸŽ‰πŸŽ‰πŸŽ‰
          <MDBCarousel showIndicators showControls fade>
              className="w-100 d-block"
              <h5>First slide label</h5>
              <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
              className="w-100 d-block"
              <h5>Second slide label</h5>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
              className="w-100 d-block"
              <h5>Third slide label</h5>
                Praesent commodo cursus magna, vel scelerisque nisl consectetur.

    export default IndexPage;

    export const Head = () => <title>Home Page</title>;