Subscribe & Save

Recurring purchase card with a tone discount badge, a frequency dropdown, next delivery date, emerald per-order savings, and a tone Subscribe CTA.

Subscribe & save

−10%

Next deliveryMay 21, 2026

You save$4.80 / order

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

import { Commerce20 } from "@/components/beste/piece/commerce20";

<Commerce20
  frequency="Every month"
  next="May 21, 2026"
  savePerOrder="$4.80"
  savePercent={10}
  tone="emerald"
/>