Price Stack

Pricing card with the sale price in rose, the original price struck through, a percent-off badge, and a countdown to sale end.

Cashmere Crewneck
$189$26027%
Sale ends in 2d 4h

New here? Read the installation guide.

Import & use
import { Commerce5 } from "@/components/beste/piece/commerce5";

<Commerce5
  name="Cashmere Crewneck"
  sale="$189"
  original="$260"
  offPercent={27}
  endsIn="Sale ends in 2d 4h"
/>

More Commerce pieces

View all Commerce
Promo code
SUMMER20
20% off applied
−$24.00

Promo Code

Coupon entry with a tag-prefixed code field, an Apply button, and an emerald confirmation row showing the discount and amount saved.

Subtotal$284.00
ShippingFree
Tax (8.5%)$24.14
Discount · SUMMER20−$56.80
Total$251.34

Cart Summary

Order math card with subtotal, shipping, tax, and an emerald discount line, separated from a bold final total below.

Order confirmed#SO-8241
$284.00
Arrives Apr 26 – Apr 28
Receipt sent to hello@beste.co

Order Confirmation

Post-purchase card with an emerald check, order id, total price, a package-arrival line, and the receipt email destination.

Beste Goods · SF
INV-2026-0421
2× Air Max 90$258.00
1× Cotton Tee$48.00
1× Retro Shades$38.00
Subtotal$344.00
Total$368.14
Paid · Visa ending 4242

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.

Nomad Diver Watch
Nomad Diver WatchBlack · Steel band
$420
1

Add to Cart

Mini cart-line card with product photo, name, variant, price, a minus/plus quantity stepper, and a tone-filled Add to cart button.

Recently viewed
Air Max 90
$129
Diver Watch
$420
Leather Pack
$340
Studio HP
$299

Recently Viewed

History strip card showing four recently viewed products as square thumbnails with their prices on a compact grid.

Markdown version