shadcn

Run npx shadcn@latest add followed by component names, such as npx shadcn@latest add button card dialog. Use the package runner matching your project (pnpm dlx or bunx --bun), and preview changes first with --dry-run or --diff.

Use npx shadcn@latest apply <code> to overwrite an existing project's preset, or npx shadcn@latest init --preset <code> when initializing. Never decode preset codes manually; use preset decode, preset url, or preset resolve commands instead.

The base field in components.json determines the primitive library and 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.

Run npx shadcn@latest add <component> --dry-run to see affected files, then --diff <file> per file to compare upstream changes. Merge upstream updates manually where local modifications exist, and never use --overwrite without explicit approval.

FieldGroup and Field provide consistent layout, labeling, and validation state handling in shadcn/ui. Validation requires data-invalid on the Field and aria-invalid on the control, which raw div layouts with space-y-* do not wire up correctly.

Yes, add items with namespaced addresses like npx shadcn@latest add @magicui/shimmer-button or GitHub addresses like owner/repo/item. After adding, verify imports match your project's aliases and icon library, since third-party items may use default paths.