storybook

Storybook Component Documentation

Overview

Document and showcase design system components using Storybook. Create interactive examples, visual tests, and comprehensive documentation with controls, args, and MDX.

When to Use

• Setting up component documentation
• Creating interactive component playground
• Visual regression testing
• Building a component library catalog
• Onboarding developers to the design system

Quick Reference: Story Formats

Format	Use Case	File Extension
CSF 3.0	Standard stories with args	.stories.tsx
MDX	Documentation + stories	.mdx
Autodocs	Auto-generated docs	Enabled in config

The Process

1. Install Storybook: npx storybook@latest init
2. Configure for framework: React, Vue, Svelte, Angular
3. Set up design tokens: Import CSS tokens globally
4. Write stories: One story per component variant
5. Add controls: Enable props manipulation
6. Write docs: MDX documentation pages
7. Add addons: A11y, viewport, themes

Project Structure

.storybook/
├── main.ts           # Storybook config
├── preview.ts        # Global decorators, parameters
├── preview-head.html # Global CSS imports
└── theme.ts          # Custom Storybook theme

src/
├── components/
│   ├── Button/
│   │   ├── Button.tsx
│   │   ├── Button.stories.tsx
│   │   └── Button.mdx       # Optional MDX docs
│   └── Input/
├── tokens/
│   └── index.css
└── docs/
    ├── Introduction.mdx
    ├── Colors.mdx
    └── Typography.mdx

---

Configuration

.storybook/main.ts:

import type { StorybookConfig } from '@storybook/react-vite';

const config: StorybookConfig = {
  stories: [
    '../src/**/*.mdx',
    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-a11y',
    '@storybook/addon-links',
    '@storybook/addon-interactions',
    '@chromatic-com/storybook',
  ],
  framework: {
    name: '@storybook/react-vite',
    options: {},
  },
  docs: {
    autodocs: 'tag', // Enable autodocs for tagged components
  },
  staticDirs: ['../public'],
};

export default config;