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.

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

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

Import & use
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"
/>