Skip to content
Get packs

Guide · Open source

How to use Storybook: build and document UI components

Updated · written with AI from the project's own documentation and checked against our catalogue data

Storybook is a frontend workshop where you build and view UI components and pages in isolation, away from the rest of your application. This guide explains what it is for, which frameworks it supports, how to get the project, and where to go next for setup. After reading it, you will know whether Storybook fits your project and how to start exploring it.

Storybookstorybookjs/storybook · ★ 91.4k · MIT

Quick start

  1. 1Decide if Storybook fits. Check that your project has UI components you want to build or test in isolation. Storybook is built around components and pages.
  2. 2Pick a supported renderer. Choose the framework your project uses, such as React, Vue 3, Angular, or Svelte, from the supported renderers list.
  3. 3Clone the repository. Run the clone command from the README to get the project source.
  4. 4Read the docs for setup. Follow the framework-specific setup on the Storybook docs site, since the README does not include full setup steps.
  5. 5Try an example. Use storybook.new to create an example project in StackBlitz and see how components are displayed.
  6. 6Add addons as needed. Install addons for design, documentation, testing, or interactivity once the basic setup works.

What is Storybook used for?

Storybook is a frontend workshop for building UI components and pages in isolation. The project describes it as the industry standard workshop for building, documenting, and testing UI components.

Teams use it for three main jobs: UI development, testing, and documentation. Because each component is viewed on its own, you can work on it without running the whole application.

  • UI development: build a component without running the full app
  • Testing: check components in isolation
  • Documentation: keep living documentation of your components

Which frameworks does Storybook support?

Storybook supports several renderers. The README's table of supported frameworks includes React, Angular, Vue 3, Web components, React Native, HTML, Ember, Svelte, and Preact, plus a Qwik framework listed separately.

Storybook can also be extended with addons for component design, documentation, testing, and interactivity. The README also notes it has been extended to support React Native, Android, iOS, and Flutter for mobile.

  • React
  • Angular
  • Vue 3
  • Web components
  • React Native
  • HTML
  • Ember
  • Svelte
  • Preact

Get the Storybook source code

The only install command in the source is a command to clone the repository. The README lists no prerequisites, so check the docs for what your project needs before you begin.

Cloning gives you the project source, which is written in TypeScript and released under the MIT licence.

git clone https://github.com/storybookjs/storybook

Find setup and framework-specific instructions

The README does not walk through full setup. It points to Storybook's documentation site for getting started, and it says setup depends on the framework you use.

The README also mentions storybook.new, which the project describes as a way to quickly create an example project in StackBlitz. Use the official docs to choose the renderer that matches your project.

  • Documentation site: storybook.js.org/docs
  • Example project: storybook.new (creates a StackBlitz example)
  • Showcase of teams using Storybook: storybook.js.org/showcase

Get help when something goes wrong

For additional help, the README asks you to share your issue in the repo's GitHub Discussions. The project also has a Discord server and a community page linked from the README.

When you ask for help, name the framework or renderer you are using, since setup differs between them.

  • Ask in GitHub Discussions (help category)
  • Join the Discord community linked from the README
  • Check the community page at storybook.js.org/community

What people use it for

  • Building a shared component library or design system for a frontend team
  • Developing a single UI component without running the whole application
  • Keeping living documentation of components that stays close to the code
  • Checking components in isolation as part of testing

Frequently asked questions

Is Storybook free?

Storybook is open source and released under the MIT licence, according to the project's repository. The README does not list any paid tier, so check the licence file for the terms.

What do I need to install Storybook?

The README lists no prerequisites. It points to the docs for framework-specific setup, so check the documentation for your renderer before starting.

Which frameworks does Storybook work with?

The README lists React, Angular, Vue 3, Web components, React Native, HTML, Ember, Svelte, and Preact, along with a Qwik framework. Each one has its own renderer.

Can I use Storybook without a full app?

Yes. Storybook is designed to let you develop a UI component without running the whole app, since it shows components and pages in isolation.

What are the alternatives to Storybook?

The comparable projects listed for this item are Chromatic, Ladle, Histoire, and Fractal. Compare them on the framework you use and the features you need.

Where do I get help if Storybook breaks?

Share your issue in the repo's GitHub Discussions help category, as the README asks. You can also join the Discord community linked from the README.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Storybook suits frontend teams building a shared component library, design system, or living documentation for React, Vue 3, Angular, or another supported renderer. It is a poor fit if you have no UI components to isolate or you need a tool with no setup, because the README points to docs and framework-specific configuration.

Install options & downloads