shadcn/ui is a collection of beautifully designed, accessible React components built on Radix UI primitives and styled with Tailwind CSS. Unlike traditional component libraries distributed via npm, shadcn/ui operates on a copy-paste model — components live in your codebase as source code, giving you complete ownership and customization control. The CLI scaffolds components directly into your project with full TypeScript support, class-variance-authority (CVA) for systematic variants, and built-in accessibility patterns following WAI-ARIA standards. It integrates seamlessly with Next.js, Vite, Remix, and other React frameworks, supports both light and dark modes through CSS variables, and includes powerful components for forms (React Hook Form + Zod), data tables (TanStack Table), charts (Recharts v3), and more. The registry system and CLI v4 enable custom component distribution, presets for rapid project scaffolding, and AI-assisted development workflows.
What This Cheat Sheet Covers
This topic spans 15 focused tables and 189 indexed concepts. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.
Table 1: Core Concepts and Architecture
shadcn/ui fundamentally shifts from traditional npm package dependencies to a source-first model where components become part of your codebase. This architecture choice enables unrestricted customization, eliminates version lock-in, and ensures components evolve with your project rather than constraining it. Built atop Radix UI for behavioral primitives and Tailwind CSS for styling, the system uses CSS variables for theming, class-variance-authority for type-safe variants, and a registry-based CLI for component distribution.
| Concept | Example | Description |
|---|---|---|
npx shadcn add button# Copies Button.tsx to your project | • Components are scaffolded into your codebase as source code rather than installed as dependencies • You own and modify the files directly • No version lock-in or upgrade constraints | |
import * as Dialog from "@radix-ui/react-dialog"// Unstyled behavior | Unstyled, accessible UI primitives providing component behavior, keyboard navigation, focus management, and ARIA patterns without visual styling | |
className="bg-background text-foreground"// Uses CSS variables | • Utility-first styling with semantic design tokens defined as CSS variables • Theme-aware classes adapt to light/dark modes automatically | |
const buttonVariants = cva("base", { variants: { variant: { default: "...", destructive: "..." } }}) | • Type-safe variant system for systematic component styling • Composes Tailwind classes based on props • Ensures consistent visual patterns across components | |
npx shadcn initnpx shadcn add dropdown-menu | • Command-line tool for project initialization, component installation, and custom registry management • CLI v4 adds preset support and AI integration |