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"