shadcn/ui: The Component Library That Isn't a Library

⬅️ Back to Tools

Stop Installing UI Libraries. Start Owning Them.

Every frontend dev knows the drill: pick a component library, npm install it, fight its opinions for three weeks, then eject when the maintainer ships a breaking change you can’t absorb. shadcn/ui kills this cycle entirely. It is not a library you install. It is a CLI that copies beautifully designed, accessible component source code directly into your project. You own every line. Every token. Every pixel.

“Start here then make it your own.”

The Insight

Most component libraries solve the wrong problem. They give you pre-built components as black-box dependencies…great on day one, painful on day 30 when you need to tweak a border radius or add a loading state that the API doesn’t support. shadcn flips the model: the CLI generates real TypeScript source files in your components/ui/ directory. You get the design. You get the accessibility (Radix primitives under the hood). You get full control.

How It Works

Create a new project or drop it into an existing one:

npx shadcn@latest init

The CLI detects your framework (Next.js, Vite, Remix, Astro, Laravel), configures Tailwind CSS, and sets up your components.json. Then add components one at a time:

npx shadcn@latest add button
npx shadcn@latest add dialog
npx shadcn@latest add data-table

Each command copies a single component file into your project. No node_modules bloat. No version lock-in. No upgrade roulette.

What You Get

Over 50 production-grade components, all built on the same foundation:

  • Primitives — Button, Input, Select, Checkbox, Switch, Slider, Toggle
  • Layout — Card, Sheet, Drawer, Sidebar, Resizable, Separator
  • Navigation — Breadcrumb, Navigation Menu, Pagination, Tabs, Menubar
  • Data Display — Table, Data Table (TanStack), Badge, Avatar, Calendar
  • Feedback — Alert, Toast, Sonner, Progress, Skeleton
  • Overlay — Dialog, Popover, Tooltip, Dropdown Menu, Context Menu, Hover Card
  • Charts — Area, Bar, Line, Pie, Radar, Radial, all via Recharts

Every component ships with variants powered by class-variance-authority, full keyboard accessibility from Radix, and dark mode support out of the box.

Theming

The CLI scaffolds a CSS variables system using HSL values. Customize your entire design system by editing a handful of tokens:

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  --radius: 0.5rem;
}

Or pick from the pre-built themes on the docs site and paste the generated CSS. Done.

The “Create” Flow

For teams that want a head start, ui.shadcn.com/create lets you scaffold an entire project from the browser, just pick your framework, your style, your color palette. Then get a deploy-ready codebase with components already installed.

Key Features

  • Copy, don’t install — source code lives in your repo, not node_modules
  • Framework-agnostic CLI — works with Next.js, Vite, Remix, Astro, Laravel, and more
  • Radix UI primitives — full WAI-ARIA compliance, keyboard navigation, focus management
  • Tailwind CSS — utility-first styling, no CSS-in-JS runtime overhead
  • TanStack Table — the Data Table component wraps TanStack for sorting, filtering, pagination
  • Variants system — class-variance-authority for type-safe component variants
  • Dark mode — CSS variables swap automatically via next-themes or your preferred solution
  • AI-friendly — includes skills/shadcn directory with structured guidance for LLM-powered development
  • Blocks — pre-built page-level compositions (dashboards, auth flows, settings) you can drop in

Tech Stack

shadcn/ui is MIT licensed, maintained by shadcn at Vercel, with many contributors:

  • Core: React, TypeScript, Tailwind CSS v4
  • Primitives: Radix UI, Base UI
  • Table: TanStack Table
  • Charts: Recharts
  • Build: pnpm workspaces, Turbo
  • Testing: Vitest

Get Started

Visit ui.shadcn.com and click New Project. Or run it straight from your terminal:

# New Next.js project
npx shadcn@latest init

# Add components
npx shadcn@latest add button card dialog

For existing projects, the CLI detects your setup and adapts. No ejection needed — the code is already yours.

🔗 GitHub: github.com/shadcn-ui/ui — ⭐ 110k stars

Why This Tool Rocks

  • You own the code — no maintainer can break your app with a patch release
  • Composable, not opinionated — every component is a starting point, not a constraint
  • Accessibility by default — Radix handles the hard parts (focus trapping, ARIA, keyboard nav)
  • Zero runtime CSS — pure Tailwind, no styled-components or Emotion overhead
  • AI coding compatible — structured for LLM workflows, with skill files and clear conventions
  • Battle-tested at scale — 14.5k+ projects on GitHub depend on it
  • Free and open source — MIT license, no premium tier, no vendor lock-in

If you build React UIs, this is the closest thing to a cheat code that exists. Install the CLI, pick your components, own the source. Ship faster, customize freely, never fight a dependency again.