Storybook is a frontend workshop environment for building, testing, and documenting UI components in isolation across React, Vue, Angular, Svelte, and other frameworks. It excels at component-driven development, enabling teams to build isolated components, test edge cases, generate living documentation, and catch visual regressions before they reach production. Storybook's CSF3 (Component Story Format) emphasizes minimal boilerplate and composability — each story is a portable, testable artifact that can be reused in Jest, Playwright, or Vitest, making it not just a showcase but an integral part of your testing and design system infrastructure.
What This Cheat Sheet Covers
This topic spans 20 focused tables and 128 indexed concepts. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.
Table 1: Story Format and Structure
Everything in Storybook revolves around the anatomy of a story file, and CSF3 boils it down to two ideas: a default export that holds the component's shared metadata, and one named export per state you want to capture. Once that clicks, the rest of this table is the toolkit layered on top — args and argTypes to make props interactive, decorators to wrap a story in the context it needs, and play/loaders to add behavior and data — so a single story can double as a demo, a test, and a doc.
| Concept | Example | Description |
|---|---|---|
export default { component: Button };export const Primary = { args: { label: 'Click' } }; | • Latest story format using ES6 modules with less boilerplate • stories are objects with args instead of functions, enabling better composability and portability. | |
export default { component: Button, title: 'UI/Button'}; | • Defines component metadata including component, title, decorators, parameters, and argTypes • all stories in the file inherit these settings | |
export const Primary = { args: { variant: 'primary' }}; | • Each named export is a story representing a specific component state • story name becomes the sidebar label by default | |
args: { label: 'Submit', disabled: false } | • Live inputs that map to component props • editable via Controls panel, enabling interactive exploration without code changes | |
argTypes: { variant: { control: 'select', options: ['primary', 'secondary'] }} | • Defines control types, options, and documentation for args • supports select, radio, boolean, text, color, date, and more |