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.

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.

Nomad Diver Watch
Nomad Diver WatchBlack · Steel band
$420
1

Add to Cart

Mini cart-line card with product photo, name, variant, price, a minus/plus quantity stepper, and a tone-filled Add to cart button.

Cashmere Crewneck
$189$260−27%
Sale ends in 2d 4h

Price Stack

Pricing card with the sale price in rose, the original price struck through, a percent-off badge, and a countdown to sale end.

Only 3 left in stock
18 watching

Stock Alert

Urgency row with a pulsing dot that flips emerald, amber, or rose by remaining stock, a watchers count, and a thin stock bar.

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.

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.

Air Max 90 EssentialNew
Air Max 90 Essential
$1294.7(284)

Product Tile

Catalog tile with a square product photo, a corner New tag, a heart save button, and a name, price, and star rating footer.

greet.ts
export function greet(name: string) {
  return `Hello, ${name}!`;
}
 
console.log(greet("Beste"));

Code Snippet Card

Dark editor card with three traffic-light dots, a filename tab, and line-numbered code.

const greeting = "Hello, Beste!";ts

Code Line

One-line code snippet with a monospace pill and a tiny language tag on the right.

Let's move the sync to 3pm instead.
Not delivered

Failed Message

Struck-through outgoing bubble with a rose alert dot, Not delivered label, and retry / delete actions.

AK
Ayşe KayaDesigner09:42

Pushed a new pass on the empty states — peek when you have a sec 🎨

Group Message

Avatar plus inline author, optional role chip, timestamp, and the message body beneath.

Payment request
$48.60
Dinner split · Packer's Coffee

Payment Request

Money request bubble with a direction arrow, large amount, optional italic note, and Pay / Decline actions.

Packer's Coffee · interior
Packer's CoffeeKuloğlu, Turnacıbaşı Cd. 29, 34433 Beyoğlu/İstanbul0.4 km away

Location Share

Chat bubble with a faux-map preview, a pulsing pin, and the place name, address, and distance beneath.

Message Actions

Floating toolbar with react, reply, copy, delete, and overflow actions. Delete tints rose.

0:09

“Hey, jumping on a call in five. Can you pull up the latest Figma file?”

Voice Transcription

Voice bubble with waveform and duration on top and a quoted italic transcript below the divider.

Search Result

Conversation search row with author and time above a message line where the match is amber-highlighted.

Markdown version