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.
Develop durable user interfaces
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 storySupercharge 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“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.”
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.”
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!”
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 StorybookEmbed stories in wikis, Markdown, and Figma
Embed stories to showcase your work to teammates and the developer community. Works with the oEmbed standard.
Embed storiesimport 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 librariesimport 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'
);
});“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.”
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.
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.