shadcn UI Implementation

Implement production UIs using shadcn/ui on React/Next.js with Tailwind and Radix primitives.

Prerequisites

• React 18+ or Next.js 13+ project
• Node.js 18+ installed
• Tailwind CSS configured
• TypeScript recommended

Setup

1. Initialize shadcn/ui:

   npx shadcn-ui@latest init
   

2. Add components:

   npx shadcn-ui@latest add button
   npx shadcn-ui@latest add form
   npx shadcn-ui@latest add dialog
   

Component Structure

Keep a clean separation between shadcn primitives and app-level components:

components/
├── ui/              # shadcn primitives (do not modify)
└── app/             # app-specific composites
    ├── user-form.tsx
    ├── data-table.tsx
    └── layouts/

Best Practices

• Don't modify ui components - Extend them in app-level components
• Consolidate design tokens - Define colors, spacing in tailwind.config.ts
• Preserve accessibility - Radix primitives have built-in ARIA; don't remove it
• Use composition over configuration - Combine primitives rather than complex props
• Leverage cn() helper - For conditional class merging

Form Patterns

Use react-hook-form with zod validation and shadcn Form components:

1. Define a zod schema for validation
2. Use useForm with zodResolver
3. Wrap inputs in FormField components from @/components/ui/form

See Also

• reference.md - Folder conventions, design token strategy, do/don'ts
• templates/shadcn-form.tsx - Form implementation with validation
• templates/shadcn-dialog.tsx - Accessible dialog pattern
• templates/shadcn-data-table.tsx - Table with sort/filter scaffolding