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

New here? Read the installation guide.

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"
    }
  ]}
/>

More Commerce pieces

View all Commerce
Frequently bought together
Air Max 90
$129
Cotton Tee
$48
Retro Shades
$38
$215Save $20

Bundle Picker

Frequently-bought-together row with product thumbnails joined by plus icons, a bundle total with a Save emerald chip, and a tone Add-items CTA.

Size

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.

Air Max 90
Air Max 90$129
Cloud Runner
Cloud Runner$159
Material
Canvas
Knit mesh
Weight
320 g
240 g
Waterproof
Rating
★ 4.7
★ 4.9

Compare Products

Two-column comparison with product photos, names, prices, an emerald Pick badge on the recommended one, and attribute rows with text or check/X cells.

Tracking1Z999AA10123456784
  1. Order placedApr 20, 2:14pm
  2. PackedApr 21, 9:00am
  3. ShippedApr 21, 4:30pm
  4. DeliveredEstimated Apr 22

Order Tracking

Vertical shipment status with check, spinning, and pending dots connected by a tone-colored line, each row showing label and timestamp.

Beste Goods · SF
INV-2026-0421
2× Air Max 90$258.00
1× Cotton Tee$48.00
1× Retro Shades$38.00
Subtotal$344.00
Total$368.14
Paid · Visa ending 4242

Receipt Lines

Dashed-border receipt with the store name and order id, three monospaced quantity-name-price rows, a subtotal, and a bold final total with payment method.

Gift card amount
$Custom amount

Gift Card Picker

Amount selector for a gift card with a gift icon header, four preset value chips where the selected one fills with tone, and a custom amount row.

Markdown version