Doc blocks for design system documentation
If you document design systems, I’m about to save you a ton of time. Because Storybook comes with lesser-known components for organizing colors, typography, and icons.
ColorPalette
Display color systems with the ColorPalette
component.
Import "@storybook/blocks"
.
Then render a ColorPalette
with a single ColorItem
inside.
Create an object with a key and color value.
And pass it to the ColorItem
component via the color
prop.
Both key and value are displayed in the UI.
Describe ColorItems
with title
and subtitle
props.
Add as many colors to the colors
prop as needed.
Use any CSS-supported color value.
ColorItem
adds gray cross-hatches to indicate translucency — where color functions with non-1
alpha values are used.
See full ColorPalette
API reference.
Typeset
Display typography systems with the Typeset
component.
Import the Typeset
component from @storybook/blocks
.
Typeset
requires four props to render: fontSizes
, fontWeight
, sampleText
, and fontFamily
.
fontSizes
and fontWeight
support any supported CSS value (and numbers).
Create a new Typeset
block for every discrete typographical subset.
See full Typeset
API reference.
IconGallery
Display icons with the IconGallery
component.
Import "@storybook/blocks"
.
Then render a IconGallery
with a single IconItem
inside it.
Place an icon inside IconItem
.
Then display that icon’s name with the name
prop.
Take this further — in React — by dynamically generating all available icons.
See full IconGallery
API reference.
Learn more…
Find in-depth references for each component on the Storybook docs page and Chromatic YouTube channel.