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

Shadow the following components to customize the layout and order of the page.

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

View Demo

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