Bundle Picker
Frequently bought together
$129
$48
$38
$215Save $20
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.
The import and the props worth knowing about, in one place.
import { Commerce7 } from "@/components/beste/piece/commerce7";
<Commerce7
title="Frequently bought together"
total="$215"
savings="Save $20"
items={[
{
"image": "https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=160&auto=format&fit=crop",
"name": "Air Max 90",
"price": "$129"
},
{
"image": "https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=160&auto=format&fit=crop",
"name": "Cotton Tee",
"price": "$48"
},
{
"image": "https://images.unsplash.com/photo-1511499767150-a48a237f0083?w=160&auto=format&fit=crop",
"name": "Retro Shades",
"price": "$38"
}
]}
tone="foreground"
/>Color picker row with circular palette swatches, a ringed check on the selected color, and a diagonal line over sold-out options.
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.
Six-slot size grid with a tone-filled selected cell and a diagonal line over sold-out sizes, plus an optional size guide link.
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.
