shadcn

Run npx shadcn@latest add followed by the component names, using your project's package runner (npx, pnpm dlx, or bunx). Check installed components first with npx shadcn@latest info, and preview changes with --dry-run or --diff before writing files.

Use npx shadcn@latest add <component> --dry-run to see affected files, then --diff <file> to compare upstream changes against your local version. Apply upstream updates per file while preserving your modifications, and never use --overwrite without explicit approval.

The base field in components.json determines the primitive library, which changes component APIs. Radix uses asChild and type="single"/"multiple" props, while base uses render props, multiple booleans, and array defaultValues for components like Select, ToggleGroup, Slider, and Accordion.

Pass the preset code directly to npx shadcn@latest apply <code> for existing projects or npx shadcn@latest init --preset <code> when initializing. Never decode preset codes manually; use preset decode, preset url, or preset resolve commands to inspect them.

shadcn/ui components rely on semantic CSS variable tokens like bg-primary and text-muted-foreground that adapt to light and dark themes automatically. Raw colors break theming, and space-y utilities cause spacing issues; use flex with gap-* instead.

Yes, the CLI supports namespaced registries like @magicui, public GitHub sources as owner/repo/item, and direct URLs. After adding third-party components, verify the added files since import aliases and icon libraries may not match your project configuration.