Design System Glossary

Storybook

Storybook is the open-source workshop for building, testing and documenting UI components in isolation. You write a "story" for each variant and state of a component; Storybook serves them as a browsable catalogue with live controls, accessibility checks and addons for visual regression testing and interaction testing.

It's been the de facto tool for component-driven development since around 2017, supporting React, Vue, Svelte, Web Components, Angular and more. For a design system, Storybook usually serves three purposes at once: dev environment, component documentation site, and the source of living style guide screenshots. Histoire and Ladle are leaner alternatives gaining traction.