Page Inspect

Storybook: Frontend workshop for UI development

- Docs
- Addons
- Showcase
- Blog
- Visual Test
- Enterprise

88,646

Search docs

# Build, test & document components

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 Startednpm create storybook@latest

v10

Latest version

40.46m

Installs per month

2282

Contributors

Version

Development

DevelopmentInteraction testingVisual testingDocumentation

localhost:6006

Find components

Introduction

Application

ProductCard

Documentation

Default

Expanded

Added to cart

Dashboard

Homepage

User Profile

Sign In

Design System

ActivityList

Form

Avatar

Button

Footer

Header

Pagination

Controls

Interactions

Addons

Name

Controls

description\*

Introducing the Space Helmet X24: a sleek, durable motorcycle helmet with advanced ventilation, anti-fog visor, and stylish graphics. Experience ultimate protection and comfort for your rides.

productTitle\*

Space Helmet X24

backgroundColor

#D8DDDD

outOfStock

False

True

padding

0

40

selectedColor

White

Space Grey

Yellow

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

/logo/react/logo/vue/logo/angularHTML5 Logo

\+ 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

### 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. Storybook uses them to power automated tests.

Learn about UI tests

- Spot test

Stories are tests you can debug in dev and QA.

Learn about UI tests
- Visual test appearance

Pinpoint UI changes down to the pixel.
- Interaction test behavior

Simulate user behavior and assert in the browser.
- Accessibility tests

Check stories for WCAG and ARIA issues.
- Coverage Reports

Track how much of your frontend code is tested.
- Snapshot test markup

Detect regressions in DOM markup.

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

- Find any component or page in your app

Storybook is a single source of truth for UI.

Learn about search
- Generate UI docs automatically

Write Markdown and build custom docs.
- Reuse components across pages and apps

Every story is a use case that you can reuse.
- Track component history and versions

QA unexpected bugs by going back in time.

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

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

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.

Learn how to setup Storybook in CI

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

Monday.com

Microsoft

D2IQ

Drei

Shopify

kickstartDS

Grommet

JSTOR

Polaris

Psammead

UI React

Fluent UI Web Compnents

Gutenberg

Explorer 1

React Spectrum

Join 2282 contributors building the future of UI development.

Star on Github

2282

Contributors

Chat with 19,777+ frontend developers.

Join Discord server

19,777+

Server members

Watch tutorials, feature previews, and interviews.

Watch on YouTube

8,320+

Subscribers

Get the latest news and updates from Storybook maintainers.

Follow on BlueSkyAnd X

24,200+

Followers

Join the community

Subscribe

7,044 developers and counting

Why

Why StorybookComponent driven UI

Docs

GuidesTutorialsChangelogTelemetry

Community

AddonsGet involvedBlog

Showcase

ExploreAbout

Open source software

Maintained by

Chromatic

Special thanks to Netlify.