Pieces/Commerce(30)

Commerce pieces from Beste UI, drop-in widgets built with shadcn/ui and Tailwind CSS.

United Kingdom· GBP £

Region Currency

Region selector with a globe header showing flag, country, and currency, and a list of regions with flags and currency codes plus a check on the active one.

Air Max 90
Air Max 90$129
Cloud Runner
Cloud Runner$159
Material
Canvas
Knit mesh
Weight
320 g
240 g
Waterproof
Rating
★ 4.7
★ 4.9

Compare Products

Two-column comparison with product photos, names, prices, an emerald Pick badge on the recommended one, and attribute rows with text or check/X cells.

Find in store
  • SF Union SquareIn stock · 0.4 mi
  • Hayes ValleyLow stock · 1.2 mi
  • Mission DistrictOut of stock · 2.8 mi

Store Locator

Nearby stores list where each row carries a semantic stock dot, store name, distance, and a chevron to drill into the location.

Pre-order1,284 notified
Air Max 90 Limited EditionShips May 15
$159

Pre-order Card

Coming-soon product card with a tone Pre-order pill, notify-count, calendar release date, price, and a tone-filled Reserve button.

Mia R.

Mia R. in Los Angeles just bought Air Max 90

3 min ago

Live Sale Toast

Social-proof popup with a gradient initials avatar and an emerald shopping-bag dot, a who-bought-what sentence, and a relative time stamp.

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.

Pay in 4·Klarna
$192
$48Today
$48Apr 28
$48May 5
$48May 12
0% interest. No fees.

Pay in Installments

Buy-now-pay-later card with provider header, four-dot installment timeline where paid steps fill in tone and the line progresses, plus a fineprint footer.

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.

Tracking1Z999AA10123456784
  1. Order placedApr 20, 2:14pm
  2. PackedApr 21, 9:00am
  3. ShippedApr 21, 4:30pm
  4. 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.

Product details
  • Material100% organic cotton
  • CareMachine wash cold, hang dry
  • Made inPorto, Portugal
  • CertifiedOEKO-TEX Standard 100

Product Highlights

Vertical attribute list with emerald check icons, label and value columns covering material, care, origin, and certification details.

Subscribe & save
−10%
Next deliveryMay 21, 2026
You save$4.80 / order

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.

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.

Gift card amount
$Custom amount

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.

Gold memberLoyalty program
2,140pts
610 pts to Platinum

Loyalty Tier

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.

Secure checkout256-bit SSL
Free returns30 days
AuthenticBrand-verified
24/7 supportChat or email

Trust Badges

Two-by-two reassurance tiles covering secure checkout, free returns, authenticity, and support, each with an icon and a short hint.

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.

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.

Ada Lovelace
2 days ago
Exactly as described

Sizing runs true and the leather softens beautifully after a week. Would buy again.

Review Card

Customer review with an initial avatar, a verified-purchase badge, five-star rating on the right, review title, and body snippet.

Your bag2
  • Air Max 90
    Air Max 90Qty 1
    $129
  • Field Jacket
    Field JacketQty 1
    $240
Subtotal$369

Cart Drawer

Mini cart panel with a count badge header, two item rows showing photo, name, quantity, and price, and a tone Checkout CTA next to the subtotal.

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.

Field Leather Backpack
Field Leather Backpack$340

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.

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.

Add $27 more for free shipping.
$48$75 goal

Free Shipping Bar

Shipping threshold card with a truck icon, an amount-to-go message that flips emerald on qualifying, and a tone progress fill toward the goal.

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.

Markdown version