Variant Swatches React component
Product option pickers for colour and size: round colour swatches with a ring that glides to the pick, size chips with a sliding fill, the chosen value named in the label, sold-out options struck through, and a low-stock warning when only a few are left.
When to use the Variant Swatches component
Use Variant Swatches on product pages and quick-add dialogs wherever shoppers pick a colour, size or other option. Seeing sold-out and low-stock options up front saves a disappointed add-to-cart.
Keep the option names short (they appear in the label and tooltip) and update the product image when the colour changes.
Installation
Add the Variant Swatches component to your project with the shadcn CLI. It lands in components/variant-swatches.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add https://reactframe.com/r/variant-swatches.jsonOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<VariantSwatches /> accepts 8 props, all optional.
| Prop | Type | Default |
|---|---|---|
| groups | { name: string; type: "color" | "size"; options: SwatchOption[] }[] | DEFAULT_GROUPS |
| value Selected value per group name. | Record<string, string> | — |
| defaultValue | Record<string, string> | { Color: "black", Size: "s" } |
| onValueChange | (value: Record<string, string>) => void | — |
| lowStock Show "Only n left" when stock is at or below this. | number | 3 |
| size | "sm" | "md" | "lg" | "md" |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- groups{ name: string; type: "color" | "size"; options: SwatchOption[] }[]Default: DEFAULT_GROUPS
- value
Selected value per group name.
Record<string, string> - defaultValueRecord<string, string>Default: { Color: "black", Size: "s" }
- onValueChange(value: Record<string, string>) => void
- lowStock
Show "Only n left" when stock is at or below this.
numberDefault: 3 - size"sm" | "md" | "lg"Default: "md"
- theme"dark" | "light"Default: "dark"
- classNamestring
FAQ
- How are sold-out options shown?
- Colour swatches fade with a diagonal strike and size chips get struck through; both stay visible but can't be selected, and screen readers hear 'sold out'.
- When does the low-stock warning appear?
- When the selected option's stock is at or below lowStock (3 by default). Size chips with low stock also carry a small dot.
- Can I add more option types?
- Add as many groups as you need; use type size for any text options (material, length, pack size).
