shadcn

Run npx shadcn@latest add followed by component names, registry-prefixed names like @magicui/shimmer-button, or GitHub addresses like owner/repo/item. Use --dry-run to preview changes and --diff to compare against existing files before writing.

Run npx shadcn@latest add <component> --dry-run to see affected files, then --diff <file> to inspect upstream changes per file. Overwrite files with no local changes and manually merge files you have customized, never using --overwrite without explicit approval.

The base field in components.json determines the primitive library and component APIs. Radix uses asChild for composition while base uses render, and components like Select, ToggleGroup, Slider, and Accordion have different props between the two.

Use npx shadcn@latest apply <code> to overwrite an existing project's preset, or npx shadcn@latest init --preset <code> --force --no-reinstall to update only config and CSS. Never decode preset codes manually; use preset decode, url, or resolve commands.

The skill's styling rules require flex with gap-* instead of space-y-*/space-x-*, and semantic tokens like bg-primary or text-muted-foreground instead of raw values like bg-blue-500. This keeps components themeable through CSS variables and consistent in dark mode.

Yes, compose MessageScroller, Message, Bubble, Attachment, and Marker instead of hand-rolled markup. MessageScroller handles streaming follow, scroll anchoring, and jump-to-latest behavior, so custom useStickToBottom hooks or ResizeObserver logic are unnecessary.