MDB React & Gatsby JS integration

How to use React with Gatsby JS - free starter

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

Prerequisites

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.

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

MDB installation

Step 1

Setup MDB.

Font Awesome

Install Font Awesome.

CSS import

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

Step 2

Launch your app.

Usage

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