If you document design systems, I'm about to save you a of time because Storybook comes with lesser-known components for organizing colors, typography, and icons. ton ColorPalette Display color systems with the component. ColorPalette Import . Then render a with a single inside. "@storybook/blocks" ColorPalette ColorItem // system/colors.mdx
import { ColorPalette, ColorItem } from "@storybook/blocks"

<ColorPalette>
  <ColorItem />
</ColorPalette> Create an object with a key and color value. And pass it to the component via the prop. ColorItem color Both key and value are displayed in the UI. <ColorItem colors={{ Apple: "#66bf3c" }} /> Describe with and props. ColorItems title subtitle <ColorItem
+  title="Apple"
+  subtitle="A delicious brand color."
  colors={{ Apple: "#66bf3c" }}
/> Add as many colors to the prop as needed. colors <ColorItem
  title="Apple"
  subtitle="A delicious brand color."
  colors={{
    Apple: "#66bf3c",
+    AppleDark: "#46991f",
+    AppleLight: "#83da5a"
  }}
/> Use any CSS-supported color value. adds gray cross-hatches to indicate translucency — where color functions with non- alpha values are used. ColorItem 1 <ColorItem
  title="Apple"
  subtitle="A delicious brand color."
  colors={{
+    Apple: "rgba(102,191,60,1)",
+    Apple60: "rgba(102,191,60,.6)",
+    Apple30: "rgba(102,191,60,.3)",
  }}
/> See full . ColorPalette API reference Typeset Display typography systems with the Typeset component. Import the Typeset component from @storybook/blocks. // system/typography.mdx
import { Typeset } from "@storybook/blocks";

<Typeset {/* required props */} /> requires four props to render: , , , and . Typeset fontSizes fontWeight sampleText fontFamily and support any supported CSS value (and numbers). fontSizes fontWeight <Typeset
+  fontSizes={["2.875em", "2em", "1.375em", "1em"]}
+  fontWeight="900"
+  sampleText="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+  fontFamily='"Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif'
/> Create a new Typeset block for every discrete typographical subset. <Typeset
+  fontSizes={["2.875em", "2em", "1.375em", "1em"]}
+  fontWeight="900"
+  sampleText="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+  fontFamily='"Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif'
/> See full . Typeset API reference IconGallery Display icons with the component. IconGallery Import . Then render a with a single inside it. "@storybook/blocks" IconGallery IconItem // system/icons.mdx
import { IconGallery, IconItem } from "@storybook/blocks"

<IconGallery>
  <IconItem></IconItem>
</IconGallery> Place an icon inside . Then display that icon's name with the prop. IconItem name + import * as Icons from "@storybook/icons";

<IconGallery>
  <IconItem name="Accessibility">
+    <Icons.Accessibility />
  </IconItem>
</IconGallery> Take this further — in React — by dynamically generating all available icons. ## Storybook icons

<IconGallery>
  {Object.entries(Icons)
    .filter(([name]) => name !== "iconList")
    .map(([name, Icon]) => (
      <IconItem name={name}>
        <Icon />
      </IconItem>
    ))}
</IconGallery> See full . IconGallery API reference Learn more… Find in-depth references for each component on the and . Storybook docs page Chromatic YouTube channel Also published . here

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Using Storybook's Doc Blocks for Design System Documentation: A Quick Guide

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A Guide on How to Embed YouTube Videos Responsively

When to Use a Relational, Non-Relational, or Graph Database

How to Use Streamlit and Python to Build a Data Science App

How to Use Google Analytics for Social Media: A Beginner’s Guide

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

A Guide on How to Embed YouTube Videos Responsively

When to Use a Relational, Non-Relational, or Graph Database

How to Use Streamlit and Python to Build a Data Science App

How to Use Google Analytics for Social Media: A Beginner’s Guide

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps