shadcn/ui

When to Use

shadcn/ui is the default component and styling approach for all frontend projects. Always prefer shadcn/ui components (<Button>, <Input>, <Card>, etc.) over raw HTML elements or hand-styled Tailwind.

Use this skill for:

• Component installation, composition, and customization
• Theming with CSS variables (OKLCH color space)
• Form integration with react-hook-form + zod
• Accessible UI patterns (via Radix UI primitives)

Only skip shadcn/ui when a project explicitly uses a different component system (e.g., MUI, Chakra).

Installation and Setup

Initialize in a Next.js Project