Component workshops

Reaching an awkward UI state through the real app means logging in, navigating and faking the right data. A component workshop skips that: it renders one component in an isolated frame, and each “story” fixes its props and mocked data, so a button, a table with 1,000 rows or an error banner can each be opened directly. Storybook keeps an index of every story, and the same stories feed generated documentation.

Stories then become tests. A story can carry a play function that clicks and types like a user and then asserts on the result. Storybook’s Vitest addon turns every story into a Vitest test run in a real browser through Playwright; accessibility checks run axe-core against each story, and visual tests catch pixel-level changes through Chromatic, a cloud service from the Storybook team.

Storybook supports React, Vue, Angular, Svelte, web components and more. Ladle is a smaller, React-only alternative built on Vite. Stories in Storybook’s Component Story Format are plain ES modules, so other tools can import them as test cases.