shadcn-ui
Installation
Summary
Complete guide to building accessible React components with shadcn/ui, Radix UI, and Tailwind CSS.
- Install and configure components via CLI (
npx shadcn@latest add), then customize directly in your project since you own the code - Covers 10+ core components: buttons, inputs, forms with Zod validation, cards, dialogs, dropdowns, sheets, tables, toasts, and charts built on Recharts
- Full Next.js App Router integration with Server Components, form handling, and metadata support; all components use
"use client"directive - Theme with CSS variables for light/dark modes; extend Tailwind config for custom colors, spacing, and animations
SKILL.md
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>