Gatsby Material UI Starter

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 new with the starter URL and start editing src/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.