shadcn-add

Add ShadCN Component to Shade

You are tasked with adding a new ShadCN/UI component to the Shade design system. Follow these steps carefully:

Important Guidelines

ALWAYS read and follow the instructions in AGENTS.md - this file contains critical information about:

• Component structure and naming conventions
• Build and test commands
• Coding style requirements
• ShadCN installation guardrails
• Storybook documentation standards

Step 1: Check if Component Already Exists

First, check if the component already exists in Shade:

1. Search for the component file in src/components/ui/{{component-name}}.tsx
2. Search for similar named files (e.g., for "input-otp" check for "input-otp.tsx", "otp.tsx", etc.)
3. If the component exists, STOP and inform the user that the component already exists and provide the file path

Step 2: Fetch ShadCN Documentation

Use Puppeteer to retrieve the component documentation (if Puppeteer is not available use Webfetch):

1. Fetch https://ui.shadcn.com/docs/components/{{component-name}}
2. Extract:
   • Component description and use case
   • Installation command (npx shadcn@latest add ...)
   • All code examples with full code blocks
   • Component variants (default, outline, ghost, etc.)
   • Size options (sm, md, lg, icon, etc.)
   • Props and TypeScript types
   • Usage patterns and best practices
3. Use this information to create comprehensive Storybook stories

Step 3: Install the Component

1. Create a git branch first (safety measure):

   git checkout -b shadcn-add-{{component-name}}
   

2. Run the installation command from the ShadCN docs:

   npx shadcn@latest add {{component-name}}
   

3. CRITICAL: When prompted about overwriting existing files, always choose "No" or "Skip"

   • NEVER overwrite existing Shade components
   • If conflicts occur, stop and inform the user

4. After installation, run:

   pnpm && pnpm lint --fix
   

5. Fix linter errors in component file: