Gatsby Starter MDBReact is a barebones Gatsby.js starter that preconfigures Material Design Bootstrap React (MDBReact) components so you can scaffold a new Gatsby site with a ready-made UI kit.
What is Gatsby Starter MDBReact?
Gatsby Starter MDBReact is a minimal boilerplate for Gatsby, published on GitHub by zlutfi, that wires up MDBReact — a React component library that merges Material Design styling with Bootstrap's responsive layout. The starter outputs a Gatsby project with Sass processing, Font Awesome icons, and progressive web app support already configured, so you can start building pages immediately instead of assembling tooling yourself.
Key Features
- MDBReact components — Includes the Material Design Bootstrap React library, giving you access to Bootstrap-style grids, buttons, cards, forms, and navigation with Material Design visuals.
- Sass Ready — Sass preprocessing is set up out of the box; write
.scssfiles and they compile as part of the Gatsby build pipeline. - Font Awesome Icons — Font Awesome is preconfigured, so you can drop scalable vector icons into components without extra setup.
- Progressive Web App — The starter includes PWA support, so a built site can be installable and serve cached assets offline.
- Netlify deployment — A one-click "Deploy to Netlify" button is embedded in the README, letting you publish the repository to a live site without manual CI configuration.
- Live demo — A demo of the starter is hosted at gatsby-starter-mdbreact.netlify.com, so you can inspect the output before cloning.
Who should use Gatsby Starter MDBReact?
- Gatsby developers who want a preconfigured setup with MDBReact rather than manually installing and connecting the component library to an empty Gatsby project.
- Front-end designers who want Material Design components in a Gatsby build and also need Sass and Font Awesome available without additional configuration.
- Rapid prototyping teams that need a quick static-site foundation with PWA support for a proof of concept, landing page, or internal tool.
What can you do with it?
- Build a landing page: Use the MDBReact components to assemble a responsive page with cards, buttons, and forms, then style with Sass variables.
- Create an installable PWA: Start from this PWA-ready configuration and add your own service worker logic to turn a portfolio or content site into an installable app.
- Learn the Gatsby + MDBReact stack: Study how the starter wires Gatsby, Sass, Font Awesome, and MDBReact together, then replace the defaults with your own pages.
How does Gatsby Starter MDBReact work?
You use the starter by cloning the GitHub repository, installing its dependencies, and running the Gatsby development server. The included Deploy to Netlify button creates a new Netlify site directly from the repository URL, so you can go from clone to live site with minimal manual steps.
Pricing
The starter is free and open source; it is publicly hosted on GitHub and the repository includes an open-source license badge. You only incur costs if you choose paid hosting, such as a commercial Netlify plan, for deployment.
Alternatives
Gatsby's official gatsby-starter-default provides a plain Gatsby boilerplate without MDBReact, Sass preconfiguration, or Font Awesome included.
FAQ
Is Gatsby Starter MDBReact free?
Yes, the starter is free to use. It lives in a public GitHub repository with an open-source license, so you can clone it, modify it, and deploy it without paying for the template itself.
How do I deploy Gatsby Starter MDBReact to Netlify?
The README includes a Deploy to Netlify button that sends you to Netlify's start-deploy flow with the repository URL pre-filled. Click it, connect your Git account, and Netlify builds and hosts the site automatically.
What does MDBReact mean?
MDBReact stands for Material Design Bootstrap React. It is a UI component library for React that combines Google's Material Design visual language with Bootstrap's responsive grid and component APIs, and it is the core library included in this starter.
