Storybook Cheat Sheet
Quick reference for Storybook: writing stories, args, decorators, controls, and addons. Essential patterns for building and documenting UI components.
Getting Started
| npx storybook@latest init | Add Storybook to an existing project |
| npm run storybook | Start the Storybook dev server |
| npm run build-storybook | Build static Storybook site for deployment |
| .storybook/main.js | Main config: addons, framework, stories glob |
| .storybook/preview.js | Preview config: decorators, parameters, global types |
Writing Stories (CSF3)
| export default { component: Button } | Define the meta (default export) for a component |
| export const Primary = { args: { label: "Click me" } } | Create a story with args |
| export const Secondary = { args: { variant: "secondary" } } | Create another variant story |
| render: (args) => <Component {...args} /> | Custom render function for a story |
| play: async ({ canvasElement }) => { ... } | Interaction test attached to a story |
Args & Controls
| argTypes: { size: { control: "select", options: ["sm","md","lg"] } } | Define a select dropdown control |
| args: { disabled: false, label: "Button" } | Set default args for all stories in file |
| control: "text" | "boolean" | "number" | "color" | "select" | Available control types |
| argTypes: { status: { mapping: { 0: "idle", 1: "loading" } } } | Map enum values to labels |
| argTypes: { onClick: { table: { disable: true } } } | Hide a control from the panel |
Decorators & Parameters
| decorators: [(Story) => <div style={{padding:"3rem"}}><Story/></div>] | Wrap stories with a decorator |
| parameters: { layout: "centered" } | Center the story in the canvas (centered/padded/fullscreen) |
| parameters: { backgrounds: { default: "dark" } } | Set default background for stories |
| parameters: { viewport: { defaultViewport: "mobile1" } } | Set default viewport size |
| // in .storybook/preview.js: decorators: [...] | Apply decorators globally to all stories |
Testing & Docs
| import { expect, within, userEvent } from "@storybook/test" | Import test utilities for play functions |
| import { composeStories } from "@storybook/react" | Reuse stories in unit tests (Jest/Vitest) |
| tags: ["autodocs"] | Auto-generate documentation page for component |
| // Button.mdx — import { Meta, Story } from "@storybook/blocks" | Write custom docs in MDX format |
| play: async ({ canvasElement }) => { const canvas = within(canvasElement); ... } | Write interaction tests inside play functions |
Try It Live
Test these patterns with our free HTML Preview. No signup needed.
Open HTML Preview →
Step-by-Step Guide
Read Guide →