Size Picker

Six-slot size grid with a tone-filled selected cell and a diagonal line over sold-out sizes, plus an optional size guide link.

Size

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

Import & use
import { Commerce3 } from "@/components/beste/piece/commerce3";

<Commerce3
  title="Size"
  selected="M"
  sizeGuideLabel="Size guide"
  sizes={[
    {
      "label": "XS"
    },
    {
      "label": "S",
      "soldOut": true
    },
    {
      "label": "M"
    },
    {
      "label": "L"
    },
    {
      "label": "XL"
    },
    {
      "label": "XXL",
      "soldOut": true
    }
  ]}
  tone="foreground"
/>