diff --git a/skills/shadcn/cli.md b/skills/shadcn/cli.md index be6abc47f3..0ae5a37061 100644 --- a/skills/shadcn/cli.md +++ b/skills/shadcn/cli.md @@ -89,6 +89,7 @@ shadcn add button --diff globals.css - Before overwriting existing components — use `--diff` to preview the changes first. - When the user wants to inspect component source code without installing — use `--view`. - When checking what CSS changes would be made to `globals.css` — use `--diff globals.css`. +- When the user asks to review or audit third-party registry code before installing — use `--view` to inspect the source. > **`shadcn add --dry-run` vs `shadcn view`:** Prefer `shadcn add --dry-run/--diff/--view` over `shadcn view` when the user wants to preview changes to their project. `shadcn view` only shows raw registry metadata. `shadcn add --dry-run` shows exactly what would happen in the user's project: resolved file paths, diffs against existing files, and CSS updates. Use `shadcn view` only when the user wants to browse registry info without a project context. diff --git a/skills/shadcn/patterns.md b/skills/shadcn/patterns.md index ce1f76f095..d4a992cd08 100644 --- a/skills/shadcn/patterns.md +++ b/skills/shadcn/patterns.md @@ -262,42 +262,159 @@ When a trigger's `render` is not a `Button` (e.g. `InputGroupAddon`), add `nativ ``` -### Select: items prop (base only) +### Select (base vs radix) -Base `Select` requires an `items` prop on the root. It also supports `multiple` and `itemToStringValue` props. +**items prop (base only).** Base `Select` requires an `items` prop on the root. Radix uses JSX only — no `items` prop. ```tsx // base. -const items = ["Admin", "Member", "Viewer"] +const items = [ + { label: "Select a fruit", value: null }, + { label: "Apple", value: "apple" }, + { label: "Banana", value: "banana" }, +] + +// radix. + ``` -Radix `Select` uses JSX only — no `items` prop. Use `placeholder` on `SelectValue`. +**Placeholder.** Base uses a `{ value: null }` item in the items array. Radix uses ``. + +**Multiple selection (base only).** Base supports `multiple` and render-function children on `SelectValue`. Radix has no multi-select. ```tsx -// radix. - - + + {(value: string[]) => { + if (value.length === 0) return "Select fruits" + return `${value.length} selected` + }} + - - Admin - Member - Viewer - + ... ``` +**Object values (base only).** Base supports object values with `itemToStringValue` and a render function on `SelectValue`. Radix uses string values only. + +```tsx +// base. + + +// radix — string values, controlled state. +const [plan, setPlan] = React.useState("starter") + +``` + +**Content positioning.** Base uses `alignItemWithTrigger`. Radix uses `position`. + +```tsx +// base. + + +// radix. + +``` + +### ToggleGroup: multiple (base) vs type (radix) + +Base uses a `multiple` boolean prop. Radix uses `type="single"` or `type="multiple"`. + +```tsx +// base — single selection (no prop needed). + + Daily + Weekly + + +// base — multi-selection. + + Bold + Italic + + +// radix — single selection. + + Daily + Weekly + + +// radix — multi-selection. + + Bold + Italic + +``` + +**defaultValue / value type.** Base always uses arrays. Radix uses string for single, array for multiple. + +```tsx +// base — controlled single. +const [value, setValue] = React.useState("normal") + setValue(v[0])}> + +// radix — controlled single. +const [value, setValue] = React.useState("normal") + +``` + +### Slider: defaultValue (base vs radix) + +Base accepts a plain number for a single thumb. Radix always requires an array. + +```tsx +// base. + + +// radix. + +``` + +Both use arrays for range sliders. Controlled `onValueChange` in base may need a cast. + +```tsx +// base. +const [value, setValue] = React.useState([0.3, 0.7]) + setValue(v as number[])} /> + +// radix. +const [value, setValue] = React.useState([0.3, 0.7]) + +``` + ### Accordion: type prop (radix only) Radix requires `type="single"` or `type="multiple"` and supports `collapsible`. The `defaultValue` is a string.