component-library

Component Library - shadcn/ui Architecture

Generate production-ready React components with shadcn/ui patterns, saving 8-10 hours per project.

Quick Start

When generating components:

1. Create /components/ui/ directory structure
2. Generate lib/utils.ts with cn() helper first
3. Create requested components with full TypeScript, variants, and accessibility
4. Include example usage for each component

Core Setup Files

Always generate these first:

lib/utils.ts - Essential cn() helper:

import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

components.json - Component registry:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/globals.css",
    "baseColor": "slate",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

Component Categories

Form Components

• Input - Text input with variants (default, ghost, underline)
• Select - Custom dropdown with search, multi-select options
• Checkbox - With indeterminate state support
• Radio - Radio groups with custom styling
• Switch - Toggle switches with labels
• Textarea - Auto-resize, character count variants
• DatePicker - Calendar integration, range selection
• FileUpload - Drag & drop, preview, progress
• Slider - Range input with marks, tooltips
• Form - React Hook Form wrapper with validation

Display Components

• Card - Container with header/footer slots
• Table - Sortable, filterable, pagination
• Badge - Status indicators with variants
• Avatar - Image/initials with fallback
• Progress - Linear and circular variants
• Skeleton - Loading states
• Separator - Visual dividers
• ScrollArea - Custom scrollbars