Storybook

Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It's open source and free.

Get Started

24.67m

Installs per month

2282

Contributors

Version

localhost:6006

Find components

Introduction

Application

ProductCard

Documentation

Default

Expanded

Added to cart

Dashboard

Homepage

User Profile

Design System

ActivityList

Form

Avatar

Button

Footer

Header

Pagination

Develop durable user interfaces

Storybook provides a workshop to build UIs in isolation. It helps you develop hard-to-reach states and edge cases without needing to run the whole app.

Made for

+ 7

Build UI components and pages in isolation

Implement components and pages without needing to fuss with data, APIs, or business logic.

Why build UIs in isolation?

Mock hard-to-reach edge cases as stories

Render components in key states that are tricky to reproduce in an app. Then save those states as stories to revisit during development, testing, and QA.

How to write a story

Supercharge your workflow with addons

Addons extend and customize your UI development workflow. There are hundreds of addons that help you build UI faster, document component libraries, and integrate with other tools.

Learn about addons

Drop the finished UI components into your app

Once you finish developing UI components in isolation, drop them into your app. You'll have confidence that the components are hardened to support every possible edge case.

Why build UIs in isolation?

Integrate with the tools you already use

Storybook is incrementally adoptable and integrates with industry-standard tools. That means your team doesn't have to change their workflow.

Browse integrations

400+

Integrations

35M

Downloads per week

“Storybook is a powerful frontend workshop environment tool that allows teams to design, build, and organize UI components (and even full screens!) without getting tripped up over business logic and plumbing.”

Brad Frost

Author of Atomic Design

Test UIs with less effort and no flake

Stories capture the “known good” states of UI components. They're a pragmatic, reproducible way to keep track of UI edge cases. Reuse stories to power automated tests

Learn about UI tests

“The tool we use for editing UI is Storybook. It is the perfect place to make sure your work aligns with designs to the pixel across breakpoints.”

Adam Neary

Tech lead

Document UI for your team to reuse

Storybook brings together UI, examples, and documentation in one place. That helps your team adopt existing UI patterns.

Learn about search

“Storybook has made developing components more streamlined by allowing us to easily include technical documentation within our design system!”

Taurie Davis

Author of Building Design Systems

Share how the UI actually works

Stories show how UIs actually work not just a static design of how they're supposed to work. That keeps everyone aligned on what's currently in production.

Publish Storybook to get sign off from teammates

Publish Storybook as a website for stakeholders to reference. Your team can check that the UI looks right without touching code.

Publish Storybook

Embed stories in wikis, Markdown, and Figma

Embed stories to showcase your work to teammates and the developer community. Works with the oEmbed standard.

Embed stories

+ and more

import stories into other JavaScript tooling

Stories are a portable standard based on ES6 modules. Write stories once and import them into any JavaScript library.

Reuse stories in tests and libraries

import React from 'react';import { render, unmountComponentAtNode } from 'react-dom';import { act } from 'react-dom/test-utils';import { composeStories } from '@storybook/testing-react';import * as stories from './UserCard.stories';
// Compile the "MissingProfileImage" storyconst { MissingProfileImage } = composeStories(stories);
let container = null;beforeEach(() => {  container = document.createElement('div');  document.body.appendChild(container);});
afterEach(() => {  unmountComponentAtNode(container);  container.remove();  container = null;});
it('renders a fallback profile image', () => {  // Render the story  act(() => {    render(&lt;MissingProfileImage /&gt;, container);  });
  // Verify the DOM structure  expect(container.querySelector('img').getAttribute('src'))    .toEqual(      '/images/user-fallback.png'    );});

+ and more

“Storybook is my go-to when starting a new design system. It makes getting something in place quick and easy for both design and engineering.”

Sarrah Vesselov

Author of Building Design Systems

Automate UI workflows

Add Storybook as a CI step to automate the UI development workflow. That helps you and your team ship faster with less manual work.

Publish Storybook

Publish Storybook online to collaborate on UI implementation with developers, designers, and PMs. Your teammates can see work without needing to spin up a dev environment.

Publish Storybook for your team

UI Tests

Test every facet of your UI: visual, functional, accessibility, and snapshot, in CI to detect UI bugs down to the component.

Auto-detect UI bugs

UI Review

Request feedback from teammates to verify UI implementation. Discuss UI changes together then assign reviewers for sign off.

Review with your team

Merge and ship

Each stage of the UI development lifecycle is tracked by a pull request check. Pass all checks to get certainty that your work is ready for production.

Integrate with Git version control

Made for frontend developers

The top frontend engineering teams rely on Storybook to ship world-changing products. Join our open source community to learn new techniques and get support.

Get involved