Shadcn/ui
ELI5 — The Vibe Check
Shadcn/ui is not a component library you install — it's a collection of beautifully designed components you COPY into your project. Instead of importing from a package (and fighting its opinions), you own the code. Want to change how a button looks? Just edit the file. No wrestling with CSS overrides. No version conflicts. It gives you production-quality components built on Radix and Tailwind, then gets out of your way.
Real Talk
shadcn/ui is a collection of re-usable UI components built with Radix UI primitives and Tailwind CSS that are copied directly into your project via a CLI tool. Unlike traditional npm packages, components live in your codebase as source files you fully own and customize. It provides accessible, well-designed components (dialog, dropdown, form, table, etc.) with a consistent design language. The model has inspired similar collections for Vue (shadcn-vue), Svelte, and other frameworks.
When You'll Hear This
"npx shadcn@latest add button — and now you own the button component." / "Shadcn isn't a dependency — it's a starting point you customize."
Related Terms
Component Library
A Component Library is a box of pre-built LEGO pieces for your UI — buttons, modals, dropdowns, all ready to snap together. Instead of building a date pick
Design System
A LEGO set for your UI — a collection of reusable components, colors, typography, and rules that keep your entire app looking consistent.
Headless UI
Headless UI is a component library that gives you all the behavior (keyboard navigation, focus management, accessibility) but zero styling.
Radix UI
Radix UI gives you components that work perfectly but look like nothing.