gatsby-theme-style-guide

Automatically generate a style guide page based on your Theme UI configuration, built with @theme-ui/style-guide.

npm i gatsby-theme-style-guide

// gatsby-config.js
module.exports = {
  plugins: [
    'gatsby-plugin-theme-ui',
    'gatsby-theme-style-guide',
  ]
}

This theme will create a page at /style-guide that includes typographic styles and colors based on your theme.

Options

module.exports = {
  plugins: [
    'gatsby-plugin-theme-ui',
    {
      resolve: 'gatsby-theme-style-guide',
      options: {
        // sets path for generated page
        basePath: '/design-system',
      }
    },
  ]
}

Shadowing

You can customize the layout and order of the page by shadowing the theme.

For example, to shadow the template.js file, you would create a file named your-site/src/gatsby-theme-style-guide/template.js.

View Demo