Writing stories in TypeScript Read more

Build component driven UIs faster

Storybook is an open source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation.
Go to the docs

Develop durable UIs

Storybook provides a sandbox to build UIs in isolation so you can develop hard-to-reach states and edge cases.
Build UIs in isolation
Implement components and pages without needing to fuss with data, APIs, or business logic.
Mock hard to reach use cases
Render components in key states that are tricky to reproduce in an app.
Keep track of use cases as stories
Save use cases as stories in plain JavaScript to revisit during development, testing, and QA.
Supercharge your workflow with addons
Use addons to customize your workflow, automate testing, and integrate with your favorite tools.

“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
company logo

Test UIs with less effort and no flake

Stories are a pragmatic, reproducible way to keep track of UI edge cases. Write stories once then reuse them to power automated tests.
Spot test in a glance
Whenever you write a story you get a handy test case. Quickly browse stories to make sure your UI looks right.
Visual test appearance
Pinpoint UI changes down to the pixel by comparing image snapshots of stories.
Interaction test behavior
Verify interactions by simulating user behavior. Debug visually alongside your story. Integrates with Testing Library.
Accessibility test
Check stories for WCAG and ARIA issues in your browser with the A11y addon.
Snapshot test markup
Detect regressions in DOM markup and run smoke tests with code snapshots.
Unit test functionality
Reuse stories in your unit tests to confirm nuanced functionality.

“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
company logo

Document UI for your team to reuse

Storybook brings together UI, examples, and documentation in one place. That helps teammates adopt existing UI patterns.
Find any component or page in your app
Storybook is a searchable, single source of truth for your UI.
Generate UI docs automatically
Write Markdown/MDX to generate a docs site for component libraries and design systems.
Reuse components across screens and apps
Every story is a use case that your team can find and reuse.
Track component history and versions
QA unexpected bugs by going back in time to compare components from previous Storybooks with the Chromatic addon.

“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
company logo

Share to get sign off from teammates

Stories show how UIs actually work not just how they're supposed to work. That makes gathering feedback and reproductions easy.
Publish to get feedback
Publish Storybook online to give your team a universal reference point for feedback.
Embed stories in your favorite sites
Embed stories to showcase live interactive examples in your docs. Works with Notion, Medium and any site supporting the oEmbed standard.
Compose multiple Storybooks together
Reference external Storybooks inside your local Storybook, no matter the view layer, tech stack, or dependencies.
import stories into other JavaScript tooling
Stories are a portable standard based on ES6 modules. Write stories once and import them into any JavaScript testing library.

Storybook is quick to install and it’s easy to get started.