shadcn/ui Patterns

Use shadcn as a composable source-based UI system, not as a black-box dependency.

Use This Skill When

• Setting up shadcn in Next.js or Vite.
• Building reusable UI primitives and design tokens.
• Implementing form/dialog/table workflows with shadcn components.

Core Contract

1. Install only needed components.
2. Centralize theme tokens and semantic styles.
3. Prefer composition patterns over one-off custom wrappers.
4. Keep accessibility defaults intact.
5. Keep business logic outside UI primitives.

Implementation Workflow