shadcn-ui-patternslisted

# ShadCN UI Patterns - November 2025 Standards ## When to Use - Building new UI components - Refactoring existing components to use ShadCN - Implementing forms with validation - Creating modals, dialogs, and overlays - Ensuring accessibility compliance ## Why ShadCN UI? - **Copy-paste, not npm** - Full ownership of component code - **Radix UI primitives** - Accessibility built-in (WCAG 2.1 AA compliant) - **TailwindCSS-first** - Full customization, no CSS-in-JS - **TypeScript-native** - Type-safe props and variants - **Server Component compatible** - Works with Next.js 15 App Router ## Core Principles ### 1. Component Installation Pattern ```bash # Install individual components as needed npx shadcn@latest add button npx shadcn@latest add dialog npx shadcn@latest add form npx shadcn@latest add input npx shadcn@latest add label ``` Components are copied to `src/components/ui/` directory - you own the code. ### 2. Component Usage Patterns #### Button Component ```typescript import { Button } from "@/components/ui/button" // ✅ DO: Use semantic variants <Button variant="default">Save</Button> <Button variant="destructive">Delete</Button> <Button variant="outline">Cancel</Button> <Button variant="ghost">Skip</Button> <Button variant="link">Learn More</Button> // ✅ DO: Use size variants <Button size="default">Medium</Button> <Button size="sm">Small</Button> <Button size="lg">Large</Button> <Button size="icon"><Icon /></Button> // ❌ DON'T: Create custom buttons without usin