shadcn

Run the shadcn CLI add command with your project's package runner, such as npx shadcn@latest add button card dialog. Check installed components first with npx shadcn@latest info, and use --dry-run and --diff to preview changes before updating existing components.

Run npx shadcn@latest docs followed by component names, such as npx shadcn@latest docs button dialog select. This returns URLs for documentation, examples, and API references that you can fetch for accurate usage patterns.

Yes, shadcn/ui supports both radix and base primitive libraries, which affect component APIs and available props. Check the base field from npx shadcn@latest info to know whether to use asChild (radix) or render (base) for custom triggers.

The shadcn/ui styling rules require flex with gap-* utilities instead of space-x-* or space-y-* for spacing. For vertical stacks, use flex flex-col gap-*, and use size-* when width and height are equal instead of separate w-* and h-* classes.

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

Community registry components may contain hardcoded import paths that do not match project aliases, requiring manual fixes after installation. Always review added files for missing sub-components, incorrect composition, and icon library mismatches before use.