# shadcn/ui
## 1. Not a Package — a Code Generator
Every library covered so far in this group installs as an npm dependency: `import Button from "@mui/material/Button"` pulls compiled component code out of `node_modules`, and you never see or edit its source. shadcn/ui inverts this completely: it is a **CLI tool** that **copies component source code directly into your own project**. There is no `shadcn` package sitting in `node_modules` providing components at runtime — after running the CLI, the component's actual `.tsx` file lives in your repo, under your version control, editable like any file you wrote yourself.
```bash
npx shadcn@latest add button
# creates: components/ui/button.tsx — real source, now YOURS
```
```tsx
// components/ui/button.tsx (excerpt — this file is generated once, then you own it)
import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";
const buttonVariants = cva(
"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
outline: "border border-input bg-background hover:bg-accent",
},
size: {
default: "h-10 px-4 py-2",
sm: "h-9 rounded-md px-3",
lg: "h-11 rounded-md px-8",
},
},
defaultVariants: { variant: "default", size: "default" },
}
);
```
## 2. Built From Radix UI Primitives + Tailwind
shadcn components aren't written from scratch — each one wraps an unstyled, fully-accessible **Radix UI primitive** (handling focus trapping, keyboard navigation, ARIA attributes, portal rendering for overlays) and applies **Tailwind utility classes** for visual styling, composed via `class-variance-authority` (`cva`) for variant-based styling (the `variant`/`size` props above) and the `cn()` helper (a `clsx` + `tailwind-merge` combo, see the Tailwind CSS topic's `twMerge` exercise for the underlying idea) for merging classes without conflicts.
```
Radix UI primitive → unstyled behavior/accessibility (focus, keyboard nav, ARIA)
Tailwind + cva → the visual styling layered on top
shadcn CLI → glues the two together and writes the result into YOUR repo
```
## 3. The Ownership Model — What "You Own It" Actually Means
```tsx
// You can open components/ui/button.tsx and just... edit it.
// Want a new variant? Add a key to buttonVariants' "variant" object.
// Want different default padding? Change the "default" size string directly.
// No wrapper component, no "swizzling," no fighting an npm package's API surface.
```
Because the component is plain source code in your repo, customizing it beyond what a `variant`/`size` prop exposes means **directly editing the file** — there's no separate "theming API" to learn, no risk of a `npm update` silently changing the component's behavior out from under you, and no need to reach for MUI-style theme overrides or `!important` CSS overrides to fight a black-box package's default styles. The cost is the inverse of MUI's: you're now responsible for that file's maintenance (bug fixes, accessibility regressions) instead of a maintainer upstream — there's no `npm update @mui/material` equivalent that pulls in improvements automatically once a component has been generated into your project.
## 4. Composing shadcn Components
```tsx
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
function DeleteConfirmDialog() {
return (
);
}
```
Components compose as ordinary JSX, same as any React component — `Dialog`/`DialogTrigger`/`DialogContent` are compound-component pieces (inherited from the underlying Radix primitive's API shape) that share implicit state (open/closed) via context, rather than one monolithic `