Build UIs without the grunt work

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
v8
Latest version
21.68m
Installs per month
2249+
Contributors
Development
localhost:6006
Github
Airbnb
Mozilla

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.

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.

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.

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
ViteChromatic
Notion
TestingLib
Emotion
Tailwind
Jest
Nextjs
Webpack
Figma
ZeroheightNx
Apollo
Playwright
Axe
RedwoodJS
MSW
Zeplin
GraphQL
Gatsby
Launchdarkly
Sass
SWC
UXpinIonic
Sketch
Invision
Supernova
Cypress
Nuxt
“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
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

“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
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.

“Storybook has made developing components more streamlined by allowing us to easily include technical documentation within our design system!”
Taurie Davis
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
Player
Player
Player
Player

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
Embed stories using iframes in your NextJS sites
+ 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
UserCard.test.js
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" story
const { 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(<MissingProfileImage />, 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
Sarrah Vesselov
Author of Building Design Systems
logo-cloudbees

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: interaction, visual, 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
Comment from a userComment from a userComment from a user
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
All CI checks have passed!
Running CI checks on components
Storybook PublishReady to share!
Storybook PublishPublishing UI…
UI Tests2 changes accepted as baselines
UI TestsRunning tests…
UI Review3 discussions resolved
UI ReviewAwaiting reviewers…

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.

Join 2249+ contributors building the future of UI development.
Star on Github
2249+
Contributors
Chat with 20,696+ frontend developers.
Join Discord server
20,696+
Server members
Get the latest news and updates from Storybook maintainers.
Follow on Twitter
24,200+
Followers
Watch tutorials, feature previews, and interviews.
Watch on YouTube
7,020+
Subscribers
Join the community

6,378 developers and counting
Open source software
Maintained by
Chromatic
Special thanks to Netlify and CircleCi