VariantPicker

Size / color / style selector — auto color dots vs text pills.

components/variant-picker.tsxPeer deps: lucide-react

Live preview

Size· M

Color· Bone

Usage

import { VariantPicker } from "@/components/variant-picker";

const [color, setColor] = useState<string | null>(null);

<VariantPicker
  label="Color"
  options={[
    { id: "bone",     label: "Bone",     swatch: "#fbf8f1" },
    { id: "moss",     label: "Moss",     swatch: "#2D5547" },
    { id: "amber",    label: "Amber",    swatch: "#d97706", disabled: true },
  ]}
  selectedId={color}
  onChange={setColor}
/>