Variant Swatches
Color picker row with circular palette swatches, a ringed check on the selected color, and a diagonal line over sold-out options.
Usage
The import and the props worth knowing about, in one place.
import { Commerce2 } from "@/components/beste/piece/commerce2";
<Commerce2
surface="card"
bordered={true}
inverted={false}
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
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 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.
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.
- Order placedApr 20, 2:14pm
- PackedApr 21, 9:00am
- ShippedApr 21, 4:30pm
- 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.
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.
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.