Recurring purchase card with a tone discount badge, a frequency dropdown, next delivery date, emerald per-order savings, and a tone Subscribe CTA.
New here? Read the installation guide.
import { Commerce20 } from "@/components/beste/piece/commerce20";
<Commerce20
frequency="Every month"
next="May 21, 2026"
savePerOrder="$4.80"
savePercent={10}
tone="emerald"
/>Coming-soon product card with a tone Pre-order pill, notify-count, calendar release date, price, and a tone-filled Reserve button.
Order math card with subtotal, shipping, tax, and an emerald discount line, separated from a bold final total below.
Post-purchase card with an emerald check, order id, total price, a package-arrival line, and the receipt email destination.
Member status card with a tone-filled crown tile, current tier and point balance, and a tone progress bar counting down to the next tier.