component-library

Use when managing the project’s component library — registering new components, cataloging existing ones, setting up shadcn/ui, creating a component registry, documenting component APIs, or auditing for unused or duplicate components. Also use when the user says “component library”, “component registry”, “register component”, “audit components”, or “shadcn setup”.

Model	Source
sonnet	pack: ux-ui

Full Reference

component-library

Component library management — registration, cataloging, shadcn/ui setup, API documentation, and audit. The connective tissue between Magic-generated components and the project codebase.

Announcement

┏━ 🎨 component-library ━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ [one-line: what library task]                   ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

Quick Reference

Item	Value
Base layer	shadcn/ui (Radix primitives + Tailwind)
Registry format	components.json (shadcn) or custom component-registry.ts
Component path	src/components/ui/ (shadcn default)
Custom path	src/components/[category]/
Catalog tool	Manual registry or Storybook

Core Tasks

1. Initial shadcn/ui Setup

npx shadcn@latest init

Prompts for:

• Style (Default / New York)
• Base color
• CSS variables (yes — required for Tailwind v4 theming)

Creates components.json — the shadcn registry config.

2. Install shadcn Components

# Single component
npx shadcn@latest add button

# Multiple
npx shadcn@latest add card dialog sheet

# All components (not recommended — install on demand)
npx shadcn@latest add --all

3. Register a Magic-Generated Component

After magic-21st generates a component:

1. Save to the correct category path:

   • UI primitives → src/components/ui/
   • Marketing → src/components/marketing/
   • Dashboard → src/components/dashboard/
   • Forms → src/components/forms/

2. Update component-registry.ts if the project uses one:

src/lib/component-registry.ts

export const registry = {
  // ... existing entries
  "pricing-table": {
    path: "@/components/marketing/PricingTable",
    description: "3-tier pricing table with monthly/annual toggle",
    source: "magic-21st",
    createdAt: "2026-03-04",
    tags: ["pricing", "marketing", "landing-page"],
  },
} as const;

3. Export from barrel file:

src/components/marketing/index.ts

export { PricingTable } from "./PricingTable";

4. Component Audit

Scan for:

• Duplicates — multiple components doing the same thing
• Orphans — components not imported anywhere
• Missing tests — components without stories or tests
• Stale — components not updated in >90 days that may conflict with design system updates

# Find unused components (rough scan)
grep -r "from.*components" src --include="*.tsx" | grep -v node_modules > imports.txt
ls src/components/**/*.tsx | grep -v index | grep -v test | sort > all-components.txt
comm -23 <(sort all-components.txt) <(grep -o "'.*'" imports.txt | sort -u)

Component Documentation Standard

Every component in the library should have a JSDoc comment:

/**
 * PricingTable — 3-tier pricing comparison with monthly/annual billing toggle.
 *
 * @source magic-21st (2026-03-04)
 * @figma https://www.figma.com/design/.../PricingTable
 *
 * @example
 * <PricingTable
 *   plans={plans}
 *   billingPeriod="monthly"
 *   onPlanSelect={handleSelect}
 * />
 */

Skill Chains

• magic-21st — generates components to register
• figma-sync — extracts tokens that components use
• storybook (frontend pack) — document components visually
• ui-craft (frontend pack) — aesthetic direction before building the library
• generate-workflow — orchestrates the full pipeline

Completion Pattern

Components registered:   [N] new / [N] updated
Duplicates found:        [N] (list)
Orphans found:           [N] (list)
Library health:          [good / needs attention]
Next:                    add stories via storybook or test via vitest