Storybook

Storybook is an open-source tool that serves as a workshop for UI components. It lets you build, view and test each component in isolation, outside the application, and build living, interactive documentation of a team's component library.

What is Storybook used for?

Storybook is used to build UI components independently of the application: each state of a button, form or card is presented as a story, testable and shareable. It is a standard for design systems and a bridge between developers and designers, compatible with React, Vue.js and Svelte.

Why use Storybook?

By isolating components, Storybook speeds up their development, eases visual testing and documents the design system. It avoids navigating the whole application to check a single component, and serves as a shared reference for product teams.

How much does Storybook cost?

Storybook is entirely free and open source, under the MIT license. The tool is free, with no paid tier. Paid complementary services exist around it (like Chromatic for online visual testing), but Storybook itself costs nothing.