Storybook

When to Use

• Component Libraries: Building a Design System.
• Visual Testing: Visualizing all states of a component (Loading, Error, Empty).
• Documentation: Auto-generating docs for your team.

Quick Start

npx storybook@latest init
npm run storybook

// Button.stories.tsx
import type { Meta, StoryObj } from "@storybook/react";
import { Button } from "./Button";

const meta: Meta<typeof Button> = {
  component: Button,
};
export default meta;

type Story = StoryObj<typeof Button>;

export const Primary: Story = {
  args: {
    primary: true,
    label: "Button",
  },
};

Core Concepts

Stories

Controls

Addons

• Actions

  : Log events (

  onClick

  ).

• A11y

  : Check accessibility compliance.

• Interactions

  : Run small tests inside the story (

  play

  function).

Best Practices (2025)

• Use the

  play

  function: Allows interactive testing within Storybook (powered by Testing Library).
• Use "Autodocs": Enable

  tags: ['autodocs']

  to generate automatic documentation pages.
• Visual Regression: Integrate with Chromatic (by Storybook maintainers) to detect visual changes in CI.

• Don't mix business logic: Components in Storybook should be "dumb" (Presentational). If they need data, pass it via args (mocks), don't fetch from APIs inside the component if possible.

References

• Storybook Documentation