Back to templates

Template details

Gatsby Material Kit React Starter

A Gatsby starter that adapts Creative Tim's Material Kit React template for static, Material Design React sites.

About this template

Gatsby Material Kit React Starter is a Gatsby boilerplate that adapts Creative Tim's Material Kit React UI kit into a static-site generator workflow.

What is Gatsby Material Kit React Starter?

Gatsby Material Kit React Starter is a starting point for building React-based websites with Gatsby using the Material Design look of Material Kit React. It takes the components and styling from Creative Tim's Material Kit React and wraps them in a Gatsby project structure. The result is a static website that can be built and deployed to any static host, such as the Netlify demo linked from the repository. The starter is hosted in the WebCu GitHub repository.

Key Features

  • Gatsby-based — The starter runs on Gatsby, so pages are pre-rendered to static HTML at build time, which improves load speed and makes deployment to static hosting straightforward.
  • Material Kit React adaptation — It inherits the React components and Material Design styling from Creative Tim's Material Kit React, giving you a consistent visual foundation for a landing page or marketing site.
  • Netlify demo — A live deployment is available at amazing-jones-e61bda.netlify.com, letting you inspect the default pages and component styling before you start customizing.
  • React ecosystem — Because it is built with React and Gatsby, you can extend the starter with the Gatsby plugin ecosystem, including plugins for images, SEO, and analytics.

Who is it for?

Gatsby Material Kit React Starter is for developers who want a Material Design starting point for a Gatsby site. It suits React developers who prefer Gatsby's file-based routing and static exports over a client-side React app. It is also useful for teams evaluating how to port an existing React template or UI kit into Gatsby.

What can you do with it?

  • Marketing sites: Build a Material Design landing page with Gatsby and deploy it to Netlify or another static host.
  • Porting reference: Study how Material Kit React is adapted to Gatsby if you are converting a similar React template.
  • Quick prototyping: Use the starter to spin up a Material-styled site without wiring up the components yourself.

FAQ

Does Gatsby Material Kit React Starter include the Material Kit React components?

Yes, the starter adapts Material Kit React, so the React components and Material Design styling from that kit are the visual foundation of the pages.

Where can I see a live demo?

The repository links to a Netlify deployment at amazing-jones-e61bda.netlify.com.

Is this starter built with React?

Yes, it uses React through Gatsby, which is a React-based static site generator.

What is the difference between this and the original Material Kit React?

Material Kit React is a standalone React UI kit from Creative Tim; this starter integrates it into Gatsby so the site is statically generated and can be served without a Node.js server.