# Shadcnui > shadcn/ui copy-paste React components. Use for modern React UI. Use when this capability is needed. - Skill: `tomevault-io/shadcnui` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/shadcnui` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/shadcnui/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/shadcnui --- # shadcn/ui shadcn/ui is not a component library; it's a **collection of reusable components** that you copy and paste into your apps. Built on Radix UI and Tailwind. ## When to Use - **Ownership**: You want full control over the component code. - **Next.js**: The de facto standard for modern Next.js apps. - **Modern**: The "Vercel Aesthetic". ## Core Concepts ### Copy/Paste `npx shadcn-ui@latest add button`. This adds `components/ui/button.tsx` to YOUR project. ### Radix UI The headless, accessible primitives (Dialog, Tooltip) that power the interactions. ### `cn` Utility A helper to merge Tailwind classes conditionally (`clsx` + `tailwind-merge`). ## Best Practices (2025) **Do**: - **Customize**: Edit the component code! That's the point. - **Use `lucide-react`**: The standard icon set. - **Use Blocks**: Copy larger blocks (Login Forms, Dashboards) from the registry. **Don't**: - **Don't treat it like MUI**: There is no npm package to update. You own the code. ## References - [shadcn/ui Documentation](https://ui.shadcn.com/) --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/g1joshi) — claim your Tome and manage your conversions.