Product Quick View
Commerce
Source and install need .
pnpm dlx shadcn@latest add @assembli/variant-pickerVariant Picker
Product options as accessible radio groups: color swatches (solid or two-tone), a size grid with a gliding highlight, pills with a note line and image tiles. Hovering previews a value's name in the legend, stockOf strikes through sold-out values (still pickable for a notify-me flow) and dots low ones, and a status line reports stock for the full selection.
- Dependencies
- motion(npm, opens in a new tab)
Props
Other props pass through to the root element.
options*
VariantOption[]
value
VariantSelection
defaultValue
VariantSelection
onValueChange
(selection: VariantSelection, changed: string) => void
stockOf
(selection: VariantSelection) => number | undefined
Units in stock for a full selection, or
undefinedwhen unknown (treated as in stock). The picker also asks about each value with the rest of the selection held, to mark sold-out and low-stock value…lowStockAt
number
Default
3At or below this many units a value gets a dot and the status reads "Only n left".
shipping
React.ReactNode
Shown beside "In stock".
hideStatus
boolean
Hides the stock line under the options.
| Description | |||
|---|---|---|---|
| options* | VariantOption[] | – | |
| value | VariantSelection | – | |
| defaultValue | VariantSelection | – | |
| onValueChange | (selection: VariantSelection, changed: string) => void | – | |
| stockOf | (selection: VariantSelection) => number | undefined | – | Units in stock for a full selection, or |
| lowStockAt | number | 3 | At or below this many units a value gets a dot and the status reads "Only n left". |
| shipping | React.ReactNode | – | Shown beside "In stock". |
| hideStatus | boolean | – | Hides the stock line under the options. |
