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.
Material
Canvas
Knit mesh
Weight
320 g
240 g
Waterproof
Rating
★ 4.7
★ 4.9
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
Import & use
import { Commerce29 } from "@/components/beste/piece/commerce29";
<Commerce29
a={{
"image": "https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=160&auto=format&fit=crop",
"name": "Air Max 90",
"price": "$129"
}}
b={{
"image": "https://images.unsplash.com/photo-1551028719-00167b16eac5?w=160&auto=format&fit=crop",
"name": "Cloud Runner",
"price": "$159"
}}
rows={[
{
"label": "Material",
"a": {
"text": "Canvas"
},
"b": {
"text": "Knit mesh"
}
},
{
"label": "Weight",
"a": {
"text": "320 g"
},
"b": {
"text": "240 g"
}
},
{
"label": "Waterproof",
"a": {
"no": true
},
"b": {
"yes": true
}
},
{
"label": "Rating",
"a": {
"text": "★ 4.7"
},
"b": {
"text": "★ 4.9"
}
}
]}
/>