Gift Card Picker

Amount selector for a gift card with a gift icon header, four preset value chips where the selected one fills with tone, and a custom amount row.

Gift card amount
$Custom amount

New here? Read the installation guide.

Import & use
import { Commerce18 } from "@/components/beste/piece/commerce18";

<Commerce18
  amounts={[
    25,
    50,
    100,
    250
  ]}
  selected={100}
  currency="$"
  tone="rose"
/>

More Commerce pieces

View all Commerce
Frequently bought together
Air Max 90
$129
Cotton Tee
$48
Retro Shades
$38
$215Save $20

Bundle Picker

Frequently-bought-together row with product thumbnails joined by plus icons, a bundle total with a Save emerald chip, and a tone Add-items CTA.

Size

Size Picker

Six-slot size grid with a tone-filled selected cell and a diagonal line over sold-out sizes, plus an optional size guide link.

Express checkout$284.00
or pay with card

Express Checkout

Wallet-pay button row with Apple Pay, Google Pay, and PayPal in their brand colors above an or-pay-with-card divider, with the order total in the header.

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.

ColorTan

Variant Swatches

Color picker row with circular palette swatches, a ringed check on the selected color, and a diagonal line over sold-out options.

Standard3–5 business days
Free
Express1–2 business days
$9.99
Same-dayBy 9pm today
$19.99

Shipping Methods

Shipping option picker with tone-bordered selection, a radio bullet, method icon, ETA line, and emerald price for free shipping.

Markdown version