Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub


A minimalist Gatsby theme based on constraint-based design principles

npm i gatsby-theme-system


  • MDX
  • Theme UI
  • Customizable layout, colors & typography
  • Built-in page layout component
  • MDX header and footer content

Getting Started

In your gatsby-config.js, add the theme:

// gatsby-config.js
module.exports = {
  plugins: [


Shadow the src/gatsby-plugin-theme-ui/index.js file to customize the theme.

Shadow the src/gatsby-theme-system/header.mdx and src/gatsby-theme-system/footer.mdx files to customize the content in the header and footer.

MIT License

© 2023 Gatsby, Inc.