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.

HackerNoon Mobile

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

Too Long; Didn't Read

@chantastic

Credibility

RELATED STORIES