Storybook Setup for UI Components Documentation

Storybook for UI Components Documentation

Storybook is a UI component development environment in isolation. Each component is described in Stories — separate states: default button, disabled button, loading button, button with icon. Developer sees all states at once, designer can check without running the app, QA tests each state independently.

Supports React, Vue, Angular, Svelte, Web Components.

Installation in existing project

npx storybook@latest init
# Storybook determines framework automatically

What's created:

.storybook/
  main.ts       — config, addons, framework, static files
  preview.ts    — global decorators, parameters, theme
stories/        — Storybook examples (can delete)

Configuration for React + Vite + TypeScript

// .storybook/main.ts
import type { StorybookConfig } from '@storybook/react-vite'

const config: StorybookConfig = {
  stories: ['../src/**/*.stories.@(ts|tsx)'],
  addons: [
    '@storybook/addon-essentials',      // docs, controls, actions, viewport
    '@storybook/addon-a11y',            // accessibility check
    '@storybook/addon-interactions',    // interaction testing
    '@chromatic-com/storybook',         // visual regression testing
  ],
  framework: {
    name: '@storybook/react-vite',
    options: {},
  },
  staticDirs: ['../public'],
  docs: {
    autodocs: 'tag',
  },
}

export default config

Writing Stories (CSF 3)

// src/components/Button/Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react'
import { fn } from '@storybook/test'
import { Button } from './Button'

const meta = {
  title: 'UI/Button',
  component: Button,
  tags: ['autodocs'],
  args: {
    onClick: fn(),
  },
} satisfies Meta<typeof Button>

export default meta
type Story = StoryObj<typeof meta>

export const Primary: Story = {
  args: {
    children: 'Button',
    variant: 'primary',
  },
}

export const Secondary: Story = {
  args: {
    children: 'Button',
    variant: 'secondary',
  },
}

export const Disabled: Story = {
  args: {
    children: 'Button',
    disabled: true,
  },
}

export const Loading: Story = {
  args: {
    children: 'Loading...',
    isLoading: true,
    disabled: true,
  },
}

Running Storybook

npm run storybook
# Opens http://localhost:6006

Storybook provides isolated environment for component development, documentation, and visual testing.