Skip to main content

Documentation Index

Fetch the complete documentation index at: https://ship.paralect.com/docs/llms.txt

Use this file to discover all available pages before exploring further.

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 = {};