Product Highlights
Vertical attribute list with emerald check icons, label and value columns covering material, care, origin, and certification details.
Usage
The import and the props worth knowing about, in one place.
import { Commerce21 } from "@/components/beste/piece/commerce21";
<Commerce21
title="Product details"
highlights={[
{
"label": "Material",
"value": "100% organic cotton"
},
{
"label": "Care",
"value": "Machine wash cold, hang dry"
},
{
"label": "Made in",
"value": "Porto, Portugal"
},
{
"label": "Certified",
"value": "OEKO-TEX Standard 100"
}
]}
/>More Commerce pieces
View all Commerce
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.
Cart Summary
Order math card with subtotal, shipping, tax, and an emerald discount line, separated from a bold final total below.
£180 · 8 variants
£95 · 3 variants
£45
Catalogue List
A catalogue as its owner sees it, each product arriving with its status dot and its price, and the tally at the top climbing as they land.
