shadcn

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. ```bash 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: - **Typography**: Does it use the project's font variables and scale? Replace any hardcoded font sizes. - **Color tokens**: Does it reference the project's CSS custom properties? Convert any raw color values to semantic tokens. - **Spacing rhythm**: Does it follow the project's spacing scale? Harmonize padding and margins. - **Border radius**: Does it use `--radius` from the theme? Shadcn sets this globally. - *...