Product
Variant Selector
Renders one group of buttons per product option and disables combinations that map to an unavailable variant.
variants
options
interactive
Preview
Installation
Run the shadcn CLI. Dependencies and the shared lib block come with it.
npx shadcn add variant-selectorUsage
Import
import { VariantSelector } from "@/components/lumo/variant-selector"Example
const [selected, setSelected] = useState([{ name: "Size", value: "M" }])
<VariantSelector
options={[{ name: "Size", values: ["S", "M", "L"] }]}
variants={variants}
value={selected}
onValueChange={setSelected}
/>Props
| Prop | Type | Default | Required |
|---|---|---|---|
| options | ProductOption[] | - | Required |
| variants | Variant[] | - | Required |
| value | SelectedOption[] | - | Required |
| onValueChange | (value: SelectedOption[]) => void | - | Required |
All props accept standard HTML attributes unless otherwise specified.
Dependencies
Lumo blocks
- lib
Own every line
Lumo blocks copy into your repo. No runtime dependency, no lock-in. Edit the code to fit your product.