shadcn/ui
A collection of beautifully designed, accessible React components you copy into your project. Not a library you install — you own the code. Built on Radix UI primitives + Tailwind CSS. The most popular component system in the React ecosystem.
- Any React project needing a component system.
- When you want full ownership of components.
- Tailwind + Radix stacks.
- Non-React projects (use framework-specific alternatives).
- When you want auto-updates (use a real library).
Definition
shadcn/ui provides source code for components (Button, Dialog, Dropdown, Table, etc.) that you copy into your project. Built on Radix UI (accessible primitives) styled with Tailwind. You own the code — customize freely. Works with any React framework.
Why it exists
Component libraries (Material UI, Ant Design) are hard to customize. shadcn/ui gives you the source code — beautiful defaults, full control, no dependency on a third-party library.
How it works
npx shadcn-ui@latest init — sets up the config. npx shadcn-ui@latest add button — copies the component source into components/ui/. You own it — edit styles, add variants. Uses Radix primitives for accessibility and Tailwind for styling.
Scaling limits
You own the code — updates don't auto-propagate (manual re-copy). Not a drop-in for non-React frameworks. Requires Tailwind. More files in your codebase.
Cost shape
Free and open source.
Alternatives
- Material UI (MUI) — More components, harder to customize.
- Radix UI (unstyled) — Primitives only, you style from scratch.
- Chakra UI — Styled system, less flexible theming.
Failure modes
- Manual updates.
- Requires Tailwind.
- Not a package (code ownership).