New
Material UI in StorybookAutomate with Chromatic
Star74,309

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
v6.5
Latest version
Installs per month
Contributors
07:3016:30
VScode
GovUK
EU
Github
Airbnb
Mozilla
BBC
Jump to topGet started

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
reactvueangularweb-componentshtml
+ 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.

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.

400+
Integrations
35M
Downloads per week
ViteChromaticNotionTestingLibEmotionTailwindJestNextjsWebpackFigmaZeroheightNxApolloPlaywrightAxeRedwoodJSMSWZeplinGraphQLGatsbyLaunchdarklySassSWCUXpinIonicAdobeXDInvisionSupernovaCypressNuxt
“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.

Learn about UI 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
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.

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

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

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.

UI Tests

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

UI Review

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

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.

Get involved
Shopify
Polaris React

Join 1440+ contributors building the future of UI development.

Star on GitHub
1,830+
Contributors

Get support and chat with 13,000+ frontend developers.

Join Discord server
15,216+
Server members

Get the latest news and updates from Storybook maintainers.

Follow on Twitter
18,552+
Followers

Watch tutorials, feature previews, and interviews.

Watch on YouTube
2,800+
Subscribers
Join the community
5,803 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI