shadcn/ui

Overview

shadcn/ui is not an npm component library. The shadcn CLI copies component source into your repo (usually components/ui/), so you own and edit every file. Components are styled with Tailwind CSS and CSS variables and sit on Radix UI primitives (newer projects can pick Base UI via --base). Checked against shadcn CLI 4.22.1 and the docs at ui.shadcn.com (October 2026).

Instructions

Set up

# existing project (Next.js, Vite, Remix, Astro, React Router, TanStack, Laravel)
npx shadcn@latest init

# new project from a template
npx shadcn@latest init --name billing-portal --template next

init writes components.json, adds the cn() helper in lib/utils.ts, installs dependencies and sets up theme CSS variables in your global CSS. Useful flags: -t/--template (next, vite, start, react-router, laravel, astro), -b/--base (radix, base, aria), -p/--preset, --monorepo, -d/--defaults (Next.js template with the Base UI base-nova preset, so asChild is replaced by render). create is an alias for init. Also available: pnpm dlx shadcn@latest and bunx --bun shadcn@latest.