shadcn-ui

# shadcn/ui Component Patterns Build accessible, customizable UI components with shadcn/ui, Radix UI, and Tailwind CSS. ## Overview - Components are **copied into your project** — you own and customize the code - Built on **Radix UI** primitives for full accessibility - Styled with **Tailwind CSS** and CSS variables for theming - CLI-based installation: `npx shadcn@latest add <component>` ## When to Use Activate when user requests involve: - "Set up shadcn/ui", "initialize shadcn", "add shadcn components" - "Install button/input/form/dialog/card/select/toast/table/chart" - "React Hook Form", "Zod validation", "form with validation" - "accessible components", "Radix UI", "Tailwind theme" - "shadcn button", "shadcn dialog", "shadcn sheet", "shadcn table" - "dark mode", "CSS variables", "custom theme" - "charts with Recharts", "bar chart", "line chart", "pie chart" ## Quick Reference ### Available Components | Component | Install Command | Description | |-----------|----------------|-------------| | `button` | `npx shadcn@latest add button` | Variants: default, destructive, outline, secondary, ghost, link | | `input` | `npx shadcn@latest add input` | Text input field | | `form` | `npx shadcn@latest add form` | React Hook Form integration with validation | | `card` | `npx shadcn@latest add card` | Container with header, content, footer | | `dialog` | `npx shadcn@latest add dialog` | Modal overlay | | `sheet` | `npx shadcn@latest add sheet` | Slide-over panel (top/right/bo...