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.

Storage breakdown
  • Media53%
  • Docs23%
  • Cache15%
  • Other10%

Stacked Bar

Single horizontal bar divided into tinted segments by percentage, with a legend row below.

Onboarding4 / 6

Segmented Progress

Row of N equal chunks with the first K filled in the chosen tone. Trailing fraction count.

Thinking

Loading Dots

Three staggered pulsing dots inside a pill, paired with an optional label.

Deployment68%

Linear Progress

Labelled progress bar with a percent readout above and a tonal fill.

72%

Progress Ring

Circular SVG ring with a centered percentage. Tone sets the stroke color.

Account
Plan
3
Payment
4
Done

Timeline Steps

Numbered step dots connected by a line. Completed steps fill emerald with a check.

12
Notifications

Bell Badge

Bell icon with a pinging count badge that caps at 99+ and sits in a rounded pill.

AnnouncementBeste v3 is now in open beta
Early access to the new editor, theming, and live previews.

Announcement Banner

Full-width tinted banner with a tag pill, headline, CTA button, and a dismiss control.

Uploading64%
product-hero-final.mp4

Upload Toast

Live progress card with spinner, percent, filename, and a cancel × at the end of the row.

Priya Shah
Priya Shahreplied to your comment
8m
Love the new onboarding flow! Quick q — does the skip button persist across sessions?

Comment Reply

Reply-to-your-comment notification with quoted text, like count, and an inline reply action.

Out for deliveryArrives today before 18:00
DHL Express1Z999AA10123456784

Shipping Update

Delivery progress card with a four-step tracker, carrier line, and ETA string.

Weekly product syncToday, 14:00 – 14:30
in 10 min
Google Meet6

Calendar Reminder

Upcoming-meeting card with a starts-soon pill, video location, and attendee count.

Stripereceipts@stripe.com
09:42
Your February invoice is readyYour usage for February 1 – 29 totalled $1,284.00. Payment will be collected on the 3rd.

Email Preview

Inbox row with sender, subject line, two-line body preview, attachment clip, and star.

3 new likeson your post about shipping velocity
Alex repliedin the #launch-prep thread
Daily standupstarts in 10 minutes

Notification Stack

Grouped inbox card showing three queued notifications behind two peeking cards above.

Update availablev2.14.0
Restart to install new editor shortcuts and bug fixes.

Update Prompt

Software update card with version chip, changelog blurb, and a later or install action row.

Jordan Reyes
Jordan Reyes@jordan.r12 mutual connections

Follow Request

Incoming request card with avatar, handle, mutual-connections line, and accept or decline buttons.

Deployed42s
fix: resolve cart rounding edge case
a1b2c3d·main

Deployment Toast

CI/CD status card with branch, short commit sha, duration, and a building or failed state.

Achievement unlockedShipped 10 pull requests this week
+250 XP

Achievement Toast

Celebratory unlock notice with a gradient trophy tile and an XP chip on the right.

@maya.dev mentioned you in #design-reviewCan you take a look at the new pricing layout when you're free?5m ago

Mention Alert

You-were-mentioned card with the channel context and the quoted message.

Elena Park
Elena Park2m
Just pushed the redesign. Take a look when you have a sec 🙌

Message Preview

Chat notification showing sender avatar, message snippet, timestamp, and an unread dot.

Linear
Linearnow
New issue assignedENG-482 · Crash on checkout submit

Push Notification

Mobile-style push toast with app icon tile, timestamp, and a two-line preview.

Your card was declinedUpdate the payment method on file to retry the charge.

Alert Toast

Tinted alert with error, warning, or info severities. Optional dismiss × on the right.

Payment successfulYour invoice has been sent to billing@beste.co

Success Toast

Notification with a circled icon, title, description, and an optional action link.

Pagination

Numbered pagination with prev/next arrows and ellipses for long ranges. Active page flips to foreground.

Markdown version