Pieces(1076)

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.

Revenue$48.2K
  • Subscriptions
    52%
  • One-time
    28%
  • Add-ons
    14%
  • Refunds
    6%

Donut Breakdown

Revenue split card with an SVG donut on the left showing weighted slices and a percentage legend on the right.

Events this week2,840
Mon
Tue
Wed
Thu
Fri
Sat
Sun

Weekly Bars

Seven vertical bars for a rolling week with muted fills for past days and a tone-saturated bar for today's total.

Date Range Toolbar

Dashboard filter bar with a primary date-range button, a comparison-period dropdown, and a segment filter toggle.

Visit
12,400
Sign-up
3,420−72%
Active
1,980−42%
Paid
620−69%

Funnel

Conversion funnel stages where each row's bar narrows against the top stage and a rose drop-off percentage marks churn.

Top sources
1Direct
4,820
2Google
3,610
3Twitter
1,890
4Referral
980

Top List

Ranked list where each row's background bar fills proportionally to its value, with index and count on either end.

Activity
Ada Lovelacejoined
2m
Marcus R.created Project Orion
14m
Priya S.edited Onboarding doc
1h
Tomás L.archived Q1 specs
3h

Activity Feed

Recent-events list with semantic action icons (create, update, delete, signup) and a relative timestamp on the right.

Revenue$48.2K
Orders1,284
Users9.4K
Events62.1K

Widget Grid

Two-by-two KPI grid where each cell carries a tone-tinted icon tile, label, and monospaced value.

Active users+6.8%
4,821

Sparkline Card

Compact metric card with a large value, delta percentage, and an SVG sparkline with a tone-colored stroke and faint area fill.

MRR$48.2K
+12.4%vs last month

KPI Tile

Single-metric card with a large value, semantic delta pill that flips emerald for gains and rose for losses, and a comparison period.

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.

Markdown version