Skip to content

# Storybook

Visual component browser with 15 interactive stories for developing and testing UI components in isolation.

## Overview

Storybook provides a sandboxed environment to visually develop, test, and document your components. Each story renders a component with specific props, allowing you to see all variants, sizes, and states without navigating through the full application.

## Getting Started

    # Start Storybook dev server
    npm run storybook

    # Build static Storybook for deployment
    npm run build-storybook

Storybook opens at `http://localhost:6006`. The static build outputs to `storybook-static/` (gitignored).

## Included Stories

The project ships with 15 stories organized in three tiers:

### Core Primitives (6)

Component | Variants
--- | ---
Button | 6 variants × 4 sizes, loading, disabled, with icon
Badge | 6 variants (default, secondary, destructive, success, warning, outline)
Card | Basic, with header/content/footer, nested content
Input | Default, with label, disabled, with icon, error state
Dialog | Basic, with form, confirm action
Tabs | Default tabs, with content panels

### Form Components (5)

Select, Checkbox, Switch, Textarea, Slider

### Dashboard Components (4)

StatsCards, DataTable, PageHeader, EmptyState

## Writing New Stories

Create a `.stories.tsx` file next to the component:

    // src/components/ui/alert.stories.tsx
    import type { Meta, StoryObj } from "@storybook/react";
    import { Alert, AlertTitle, AlertDescription } from "./alert";
    import type { Metadata } from "next";

    export const metadata: Metadata = {
      title: "Storybook",
      description:
        "Run Storybook, write stories, and use the theme addon.",
    };

    const meta: Meta<typeof Alert> = {
      title: "UI/Alert",
      component: Alert,
    };
    export default meta;

    type Story = StoryObj<typeof Alert>;

    export const Default: Story = {
      render: () => (
        <Alert>
          <AlertTitle>Heads up!</AlertTitle>
          <AlertDescription>
            This is an alert message.
          </AlertDescription>
        </Alert>
      ),
    };

    export const Destructive: Story = {
      render: () => (
        <Alert variant="destructive">
          <AlertTitle>Error</AlertTitle>
          <AlertDescription>
            Something went wrong.
          </AlertDescription>
        </Alert>
      ),
    };

## Configuration

Storybook configuration lives in the `.storybook/` directory:

- main.ts— Framework config (`@storybook/react-vite`), autodocs, story file patterns
- preview.ts— Global CSS imports, dark mode decorator, viewport presets

## Next Steps

Browse the Components page for a full list of available primitives, or see the Testing guide for unit and E2E tests.