Skip to main content
Storybook is powerful tool for developing, testing, and reviewing UI components in isolation. Chromatic helps you to automate the process of reviewing UI changes. Follow the official guides below to add them to your project.

​
Official Setup Guides

​
Project Conventions

  • Stories Organization:
    • Application components: src/components
    • UI components (shadcn/ui wrappers): src/components/ui
  • Storybook stories path config:
.storybook/main.ts
stories: [
  {
    directory: '../src/components',
    titlePrefix: 'Application Components',
  },
  {
    directory: '../src/components/ui',
    titlePrefix: 'UI Kit',
  },
],

​
Example: Button Story

src/components/ui/Button/index.stories.tsx
import { Button } from '@/components/ui/button';
import type { Meta, StoryObj } from '@storybook/react';

const meta = {
  component: Button,
  args: {
    children: 'Button',
    variant: 'default',
    size: 'default',
  },
  argTypes: {
    variant: {
      options: ['default', 'destructive', 'outline', 'secondary', 'ghost', 'link'],
      control: { type: 'radio' },
    },
    size: {
      options: ['default', 'sm', 'lg', 'icon'],
      control: { type: 'radio' },
    },
  },
} satisfies Meta<typeof Button>;

export default meta;

type Story = StoryObj<typeof Button>;

export const Basic: Story = {};