shadcn

name	shadcn
description	Install, customize, and compose shadcn/ui components with design-system awareness. Covers CLI v4, custom registries, Tailwind v4 OKLCH theming, components.json, presets, and monorepo setup. Pairs with minoan-frontend-design for creative direction. Triggers on shadcn, install component, shadcn theme, OKLCH colors, custom registry.
argument-hint	[component-name or command]

Install, customize, and compose shadcn/ui components with design-system awareness. shadcn is a code distribution system — components are source files you own, not packages.

Workflow

Every shadcn interaction follows four steps: Orient, Install, Refine, Verify.

1. Orient

Read project state before any CLI operation. Run npx shadcn@latest info to get framework, installed components, aliases, icon library, and base library. Read components.json directly for theme config. Never guess configuration.

2. Install

Add components via CLI, never by copying from docs manually.

npx shadcn@latest add button card dialog    # Multiple at once
npx shadcn@latest add @namespace/component  # From custom registry
npx shadcn@latest add --dry-run button      # Preview before writing

Before re-adding an existing component, run npx shadcn@latest diff <name> to see upstream changes. Commit local customizations first — add overwrites files.

3. Refine

This is where craft lives. After every add, audit the component against the project's design system: