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.

This year
18Countries
42Flights
96,240Miles

Trip Stats

Year-in-review card with three tinted tiles tracking countries visited, flights taken, and miles logged.

Fare breakdown
Base fare$284.00
Taxes & fees$28.40
Seat selection$12.00
Total$324.40
For 1 adult

Fare Breakdown

Itemized receipt for a trip with a dashed divider before the bold total and passenger note.

09:40IST
12:20CDG
3h 40m
2h 30m layover in Paris
14:50CDG
17:05LHR
1h 15m

Trip Segments

Multi-leg journey card with stacked segment rows and an amber layover strip between them.

ISTIstanbul
HNDTokyo
11h 05m · Nonstop

Route Arc

Visual route card with origin and destination framing an SVG dashed great-circle arc in a selectable tone.

PC 1142SAW → AMS
Boarding now
Gate 34 · closing in 8 minUpdated 1 min ago

Flight Status

Live status card with a colored pill for on-time, delayed, boarding, or cancelled flights.

Day 3Lisbon
Sat, Jun 14
09:00Time Out MarketCais do Sodré
12:30Ride Tram 28Praça Luís Camões
18:00Miradouro sunsetGraça

Itinerary Day

Day-of-trip card with a destination header and a vertical timeline of timed stops linked by a rail.

Boarding passTK 1983
ISTLHR
PassengerBeste Sözen
GateB22
Boarding09:10
Seat12A

Boarding Pass

Ticket-shaped pass with notched edges, a passenger strip, and a detached seat column on the right.

Turkish Airlines
$312
09:40IST
4h 40m · Direct
12:20LHR

Flight Card

Flight result with airline, price, two airport codes, and a dotted route arc connecting times.

Churn rate
Percentage of customers who cancel during a period, divided by customers at the start of that period.Glossary · Metrics

Glossary Tooltip

Definition popover with a book icon, term headline, explanation, and source footer.

hero-dashboard-dark preview2560 × 1440
hero-dashboard-dark.pngUploaded by Mira · 2 days ago

Image Preview

Thumbnail-first tooltip showing a gradient preview, dimensions chip, filename, and author.

Copied!

Copied Confirmation

Green success tooltip with a check mark, used for copy-to-clipboard confirmation.

Sunset#F97066

Swatch Tooltip

Color-swatch popover pairing a filled chip with the palette name and hex code.

Step 2 of 4
Pin your favorite workspacesDrag any workspace into the sidebar rail to keep it one click away.

Onboarding Step

Coach-mark popover with step counter, dismiss ×, progress dots, and a next button.

Mar 14, 2026
12,480+8.2%
Active users

Data Point Tooltip

Chart hover tooltip with date, headline value, trend pill, and a secondary metric label.

Noor Ahmed
Noor AhmedStaff engineer · PlatformOnline

User Hover Card

Avatar hover tooltip showing name, role, and a presence dot with its state beneath.

Try the new AI rewrite
Polish any paragraph in one click. Available in the editor.

Action Tooltip

Dark rich tooltip carrying a headline, supporting blurb, and an inline action link.

Monthly recurring revenueSum of normalized subscriptions divided by months, excluding one-time charges.

Info Tooltip

Card-style help tooltip with an info icon, bolded title, and supporting copy beneath.

Duplicate row⌘D

Shortcut Tooltip

Dark tooltip that pairs a short label with inline kbd keys for the matching shortcut.

Pin to favorites

Tooltip

Dark tooltip bubble with a small triangular arrow. Direction points the tail up or down.

Reaction Bar

Row of icon buttons for like, comment, share, and save. Active items tint rose.

7 / 24

Slide Controls

Dark presenter toolbar with prev / play-pause / next, a slide counter, and a fullscreen button.

00:42
02:15

Timeline Scrubber

Pill-shaped player strip with a playhead dot riding a filled track between elapsed and total timestamps.

Filter Pills

Row of filter chips with optional count numbers. Active chip inverts to foreground.

Alignment Grid

Nine-cell anchor picker. The active anchor dot fills primary.

Markdown version