shadcn-core-stack
Installation
SKILL.md
shadcn ui Core: Stack Composition
shadcn ui is not a runtime component library : it is a CLI that copies TypeScript source files into your project. Once shadcn add button finishes, your project owns components/ui/button.tsx outright, and the only things that remain at runtime are the underlying primitives (Radix, cva, tailwind-merge, clsx, lucide-react, Tailwind). Understanding this stack is the foundation for every other shadcn skill.
Quick Reference
Stack layers (every shadcn project has these)
| Layer : owns : package : runtime cost |
|---|
Headless behaviour + a11y : focus-trap, ARIA, keyboard, RTL, controlled state : radix-ui (unified, Feb 2026) or @radix-ui/react-* (legacy per-component) : small (component-scoped, tree-shaken) |
Variant API : type-safe variant + size composition : class-variance-authority (cva) : tiny (~1 KB gzipped) |
Class conflict resolution : twMerge('px-2 p-3') returns p-3, dropping px-2 : tailwind-merge v3.x (Tailwind v4) or v2.x (Tailwind v3) : ~6 KB gzipped, cached per call site |
Conditional class composition : clsx('a', cond && 'b', { c: enabled }) : clsx : ~250 bytes |
Utility CSS : every visible style : tailwindcss v3.4 or v4.0+ : build-time |
Icons : default icon set : lucide-react : tree-shaken per icon |