Storybook

A tool for developing, documenting, and testing UI components in isolation. The default home for design system component docs.

All Dictionary

In one sentence

Storybook is a workbench where every component lives on its own page, so I can see it, poke it, and document it without running the full app.

What it is

Storybook is an open-source tool that renders components in isolation. Each component gets a “story” for every meaningful state: default, hover, loading, error, with icon, without icon. Stories double as living documentation and as test fixtures for visual regression tools.

Why it matters

Every design system needs a home for components. Storybook is the default: engineers build stories, designers review them, and tools like Chromatic and Playwright use the same stories for automated visual testing. Without Storybook, component states hide inside product pages and drift silently.

Example

A story file typically looks like this:

export default { title: 'Button', component: Button };

export const Primary = { args: { variant: 'primary', label: 'Save' } };
export const Disabled = { args: { variant: 'primary', disabled: true, label: 'Save' } };
export const Loading = { args: { variant: 'primary', loading: true, label: 'Save' } };

Each export becomes a page in Storybook. I can click through states, inspect props, read usage notes, and share a direct URL with the team.

When to use it

  • You want a single source of truth for component states and docs
  • You need engineering and design to review the same artifact
  • You plan to run visual regression with Chromatic or Playwright
  • You want to publish a public or internal component library site

See also