Storybook

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)

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";

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.