storybook

Storybook is a frontend workshop for building UI components and pages in isolation from your application. It's aimed at frontend developers, design system maintainers, and teams who want a dedicated space to develop, document, and test components without spinning up the full app each time.

It works by rendering individual components in an isolated browser environment, driven by "stories" that describe different states of a component. Teams use it across React, Vue, Angular, Svelte, Web Components, HTML, Ember, Preact, and other frameworks, with community-maintained integrations for React Native and mobile platforms like Android, iOS, and Flutter.

Key features

• Framework-agnostic rendering: works with React, Angular, Vue 3, Svelte, Web Components, HTML, Ember, Preact, and community adapters for Qwik, SolidJS, and React Native.
• Story-driven development: components are described as stories, isolated snapshots of a component's state, that render without needing the full app or backend.
• Addon ecosystem: official and community addons cover accessibility testing (a11y), interaction logging (actions), responsive layouts (viewport), CSS debugging (measure, outline), documentation (docs), and unit test reporting (jest).
• Built-in documentation: the docs addon generates readable, browsable documentation alongside working examples of each component.
• Design and QA tooling: backgrounds, viewport, and measure/outline addons help catch layout and visual issues before they reach production.
• Monorepo architecture: the project itself is organized as a monorepo with scripts for running sandboxes against different framework templates, useful if you're contributing or debugging framework-specific behavior.
• Quick project scaffolding: storybook.new spins up a working example in StackBlitz without local setup.

Ideal use cases

Storybook fits teams building a shared component library or design system who need a consistent way to develop and review UI pieces without running the whole application stack. It's a good fit for documenting component APIs and variants for other developers or designers to reference, and for visually testing components across viewport sizes, themes, or accessibility settings.

It also works well as a QA layer: reviewers can check a pull request's UI changes by browsing the affected stories instead of pulling the branch and navigating the app manually.

It's less useful for small projects with only a handful of components, where the setup overhead outweighs the benefit. It also isn't a replacement for end-to-end testing frameworks. Storybook tests components in isolation, so full-page flows, routing, and backend integration are outside its scope, though addons like the test-runner can layer in interaction testing.

Installation

Storybook is typically added to an existing frontend project rather than installed standalone. The quickest way to try it without any local setup is:

https://storybook.new

This opens a working sandbox project in StackBlitz.

For local development on the Storybook monorepo itself (contributing, debugging, or testing framework support), clone the repo and use the provided scripts:

git clone https://github.com/storybookjs/storybook.git
cd storybook
yarn start

yarn start runs a sandbox template Storybook instance with test stories. If you want to customize which framework or sandbox variant to use:

yarn task

To check code quality and run tests:

yarn lint
yarn lint:js --fix
yarn test

For adding Storybook to your own application (React, Vue, Angular, etc.), refer to the official docs at storybook.js.org/docs, which cover framework-specific installers and configuration since setup commands vary by project type and package manager.