gatsby-theme-style-guide

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.

component	description
src/template.js	the root component for the page
src/layout.js	wrapper for adding a page layout
src/header.js	header for the top of the page
src/typography.js	section for typography styles
src/colors.js	section for colors

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