Pieces/Commerce

Compact, self-contained widgets that behave like assets. Drop them into any block, card, or page to add a small touch of polish without rewriting the surrounding UI.

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

commerce25

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.

Mia R.

Mia R. in Los Angeles just bought Air Max 90

3 min ago

Live Sale Toast

commerce26

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

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

Pre-order Card

commerce27

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

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

commerce28

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

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

commerce29

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.

United Kingdom· GBP £

Region Currency

commerce30

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.