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

• Install only needed components.

• Centralize theme tokens and semantic styles.

• Prefer composition patterns over one-off custom wrappers.

• Keep accessibility defaults intact.

• Keep business logic outside UI primitives.

Implementation Workflow

1. Setup

• Initialize shadcn for current framework.

• Confirm alias paths and components.json are correct.

• Add baseline primitives (button , input , dialog , etc.).

2. Theme and Tokens

• Define CSS variables for colors, spacing, radii.

• Keep component variants consistent with product semantics.

• Avoid ad-hoc style drift across screens.

3. Composition Patterns

• Forms: RHF + Zod + shadcn form primitives.

• Dialogs: controlled open state + focus management.

• Tables: server-state aware loading, empty, error states.

• Toasts: normalize success/error messaging patterns.

4. Quality Gate

• Keyboard support and focus traps verified.

• ARIA labels and roles validated.

• Component API consistency across feature modules.

Output Requirements for Agent

• Installation and config steps.

• Token/theming plan.

• Component composition pattern.

• Accessibility and testing checklist.

References

• Full setup commands, component examples, and advanced snippets: references/guide.md