Gatsby Material UI Starter is a Gatsby boilerplate that preconfigures the Material UI component library so you can build React sites with Google's Material Design components immediately. Run it through the Gatsby CLI and you get a starting point with a self-hosted Roboto typeface, SEO setup, and offline support, all layered on the standard Gatsby Default Starter.
What is Gatsby Material UI Starter?
It is a starter template for the Gatsby static site generator, maintained by Dominic Abela on GitHub as dominicabela/gatsby-starter-material-ui. It accepts a project name through the gatsby new command and produces a configured Gatsby project where Material UI is ready to use. The demo is hosted at material-ui-starter.netlify.com.
Key Features
- Material UI Framework — Material-UI components are included and configured, so you can use buttons, cards, and other Material Design elements without installing or wiring them up.
- Roboto Typeface (self hosted) — The Google Roboto font is bundled locally, so the site does not depend on external font CDNs.
- SEO — Search engine optimization support is built into the starter configuration.
- Offline Support — The generated site works offline, using a service worker to cache assets.
- Based on Gatsby Default Starter — Includes the standard Gatsby file structure and commands, making it a familiar starting point for Gatsby developers.
- Live demo — A working example of the starter is deployed at material-ui-starter.netlify.com.
Who is it for?
- Gatsby developers — Anyone starting a new Gatsby site who wants Material Design components ready from the first page.
- React developers — Teams building a React application with Material UI who prefer a static site generator for performance and deployment simplicity.
- Prototypers — Developers who want a minimal setup with SEO and offline support so they can focus on building pages rather than configuration.
What can you do with it?
- Create a new project quickly: Run
gatsby newwith the starter URL and start editingsrc/pages/index.js. - Build a Material Design site: Use Material UI components in your React pages right away.
- Ship a production-ready base: The included SEO and offline support reduce the configuration work before deployment.
How does it work?
The quick start is a three-step process: create a project with the Gatsby CLI, start the development server with gatsby develop, and edit the source. The development server runs at http://localhost:8000 with a GraphiQL tooling link at http://localhost:8000/___graphql for querying site data.
FAQ
Is this starter free?
Yes, the starter is open source on GitHub under the dominicabela/gatsby-starter-material-ui repository, and you can use it freely to generate new Gatsby projects.
Does it include Material UI?
Yes, the entire point of the starter is to pre-configure the Material UI component library, so you can import and use Material-UI components immediately.
What does the starter include?
It includes the Material UI framework, a self-hosted Roboto typeface, SEO support, offline support, and the standard Gatsby configuration files from the Gatsby Default Starter.
How do I use it?
Use the Gatsby CLI command gatsby new followed by the starter URL and a project name, then navigate into the directory and run gatsby develop to start the development server.
Where can I see a demo?
A live demo is deployed at material-ui-starter.netlify.com.
