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.
Playground
Turn the props on the right; the snippet under them is what you would write to get what you see.
£180 · 8 variants
£95 · 3 variants
£45
import { Commerce35 } from "@/components/beste/component/commerce35";
<Commerce35
products={[{"title":"Field Jacket","price":"£180","variants":8,"status":"published"},{"title":"Waxed Tote","price":"£95","variants":3,"status":"published"},{"title":"Wool Scarf","price":"£45","status":"draft"}]}
/>Usage
The import and the props worth knowing about, in one place.
import { Commerce35 } from "@/components/beste/piece/commerce35";
<Commerce35
surface="card"
bordered={true}
inverted={false}
title="Products"
products={[
{
"title": "Field Jacket",
"price": "£180",
"variants": 8,
"status": "published"
},
{
"title": "Waxed Tote",
"price": "£95",
"variants": 3,
"status": "published"
},
{
"title": "Wool Scarf",
"price": "£45",
"status": "draft"
}
]}
variantsWord="variants"
stepMs={440}
/>More Commerce pieces
View all Commerce- 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.
NewProduct Tile
Catalog tile with a square product photo, a corner New tag, a heart save button, and a name, price, and star rating footer.
Wishlist Save
Product row with a photo, name, price, and a pill Save button that fills with a rose heart and shows the total wishlist count when active.
Recently Viewed
History strip card showing four recently viewed products as square thumbnails with their prices on a compact grid.
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.