shadcn

Run npx shadcn@latest add followed by 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 local 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 for composition while base uses render; Select, ToggleGroup, Slider, and Accordion also have different props between the two. Check the base field via npx shadcn@latest info.

Use npx shadcn@latest apply <code> to overwrite with a new preset, or init --preset <code> --force --no-reinstall to update only config and CSS. For partial updates, use apply with --only theme,font. Never decode preset codes manually; pass them directly to the CLI.

The shadcn styling rules require flex with gap-* instead of space-x-*/space-y-*, and semantic tokens like bg-primary or text-muted-foreground instead of raw colors like bg-blue-500. Semantic tokens handle dark mode automatically through CSS variables.

Yes, the CLI supports namespaced registries like @magicui, GitHub sources as owner/repo/item, and direct URLs. After adding third-party components, verify imports match your project's aliases and icon library, since registry items may use default paths.