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'
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.

Demo

Type Specimens

System Font (Body)
Heading
Monospace

Type Scale

72px
64px
48px
32px
24px
20px
16px
14px
12px

Color Palette

text
background
primary
secondary
muted
highlight
gray
accent
darken
Edit the page on GitHub
Previous:
@theme-ui/color
Next:
@theme-ui/editor