Variant Swatches

Color picker row with circular palette swatches, a ringed check on the selected color, and a diagonal line over sold-out options.

ColorTan

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

import { Commerce2 } from "@/components/beste/piece/commerce2";

<Commerce2
  title="Color"
  selected="Tan"
  swatches={[
    {
      "color": "black",
      "label": "Black"
    },
    {
      "color": "white",
      "label": "Ivory"
    },
    {
      "color": "tan",
      "label": "Tan"
    },
    {
      "color": "navy",
      "label": "Navy"
    },
    {
      "color": "olive",
      "label": "Olive",
      "soldOut": true
    },
    {
      "color": "burgundy",
      "label": "Burgundy"
    }
  ]}
/>