shadcn/ui
Not a dependency — components you copy into your project and own outright.
What it is
shadcn/ui is a collection of reusable, accessible, and customizable components built with Radix UI and Tailwind CSS. Unlike traditional libraries, it provides copy-and-paste components instead of an npm package.
shadcn/ui provides prebuilt Radix UI + Tailwind CSS components (like buttons, modals, tables, dropdowns) that you copy into your codebase. Components are fully customizable and extendable, unlike typical UI libraries.
- Licence
- MIT
- Best known for
- The copy-in model — no version to upgrade, no API to be locked into
When to use it
The question documentation cannot answer for you — because it cannot recommend something else.
Reach for it when
- You want a polished starting point but the freedom to modify anything
- You are already using Tailwind and Radix
- You want to avoid a dependency whose upgrades could break your UI
Look elsewhere when
- You want automatic updates and bug fixes from a maintained package — you are taking on that maintenance
- The project does not use Tailwind
Installation
shadcn/ui is not available as an npm package. Instead, use the CLI to install components.Getting started
The smallest useful thing you can do with it, and what each part means.
import { Button } from "@/components/ui/button";
<Button variant="default">Click Me</Button>import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
<Dialog>
<DialogTrigger>Open Dialog</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>My Dialog</DialogTitle>
</DialogHeader>
<p>Hello from shadcn/ui!</p>
</DialogContent>
</Dialog>Advanced usage
Where the library earns its place over a simpler alternative.
import { Table, TableHeader, TableRow, TableHead, TableCell, TableBody } from "@/components/ui/table";
<Table>
<TableHeader>
<TableRow>
<TableHead>Name</TableHead>
<TableHead>Age</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>John</TableCell>
<TableCell>30</TableCell>
</TableRow>
</TableBody>
</Table>import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@/components/ui/dropdown-menu";
<DropdownMenu>
<DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>Edit</DropdownMenuItem>
<DropdownMenuItem>Delete</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>Errors and fixes
The failures you are most likely to hit, and what actually resolves them.
- Component import not found
- Ensure you ran `npx shadcn-ui add <component>` and that the file exists in `components/ui`.
- Tailwind classes not applying
- Verify that Tailwind is correctly configured in your project (postcss + tailwind.config.js).
- Radix primitives not working
- Check that Radix UI packages are installed since shadcn/ui components depend on them.
Best practices
- Use the CLI (`npx shadcn-ui`) to add only the components you need.
- Keep components inside a `components/ui` folder for organization.
- Leverage Tailwind’s utility classes and variants for quick customization.
- Modify component files directly — since they live in your repo, you own them.
- Combine with Radix UI documentation when extending component behavior.
Alternatives
Comparable options, and the reason you would pick one over the other.
Background
Why it exists, and what it was reacting to.
shadcn/ui was created by Shadcn in 2023 to demonstrate how to build a component library without publishing to npm. Instead of being a dependency, shadcn/ui encourages developers to copy components directly into their codebase. This approach gives teams full control over customization, while leveraging Radix UI for accessibility and Tailwind CSS for styling.