Skip to content
Theme UI
GitHub

@theme-ui/style-guide

Component for rendering Theme UI styles in a style guide format.

npm i @theme-ui/style-guide
import { Themed } from '@theme-ui/mdx'
import { TypeScale, TypeStyle, ColorPalette } from '@theme-ui/style-guide'
export default (props) => (
<>
<Themed.h1>Style Guide</Themed.h1>
<ColorPalette />
<TypeScale />
<TypeStyle fontFamily="heading" fontWeight="heading" lineHeight="heading" />
<TypeStyle fontFamily="body" fontWeight="body" lineHeight="body" />
</>
)

See the gatsby-theme-style-guide package for easier integration with Gatsby.

View Demo

Edit the page on GitHub
Previous:
gatsby-plugin-theme-ui
Next:
@theme-ui/typography