Storybook

Overview

Storybook is a UI component workshop for developing, documenting, and testing components in isolation. It supports React, Vue, Svelte, and Angular with Component Story Format (CSF), interactive controls, accessibility auditing, and visual regression testing through Chromatic integration.

Instructions

• When writing stories, use Component Story Format (CSF) with a default export for component metadata and named exports for each variant (Primary, Secondary, Loading, Error, Disabled).
• When making stories interactive, use args for all dynamic props to enable the Controls panel, and add play functions with @storybook/test for automated interaction testing.
• When adding documentation, use autodocs tag for automatic generation from stories, or MDX files for combining prose with live component examples using doc blocks like <Canvas>, <Controls>, and <ArgTypes>.
• When testing accessibility, enable @storybook/addon-a11y which runs axe-core audits on every story automatically.
• When setting up visual regression, integrate Chromatic or Percy for screenshot comparison across PRs, and run @storybook/test-runner in CI to execute all play functions.
• When configuring globally, set shared decorators (ThemeProvider, RouterProvider) and parameters in .storybook/preview.ts to apply to all stories.
• When organizing, use sidebar hierarchy with title: "Components/Forms/Input" and keep stories co-located with components (Button.tsx + Button.stories.tsx).

Examples

Example 1: Build a component library with stories