Skip to content
Theme UI
GitHub

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.

componentdescription
src/template.jsthe root component for the page
src/layout.jswrapper for adding a page layout
src/header.jsheader for the top of the page
src/typography.jssection for typography styles
src/colors.jssection 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.

View Demo

Edit the page on GitHub
Previous:
gatsby-plugin-theme-ui
Next:
gatsby-theme-ui-blog