Pieces/Notification(23)

Notification pieces from Beste UI, drop-in widgets built with shadcn/ui and Tailwind CSS.

Notifications

All caught up

Nothing new right now

Bell Bump

Every couple of seconds the bell wiggles, the unread badge pops up by one, and a one-line preview fades in beneath, resetting once it reaches five.

Changes saved

Your profile is up to date.

Toast Queue

Bottom-right toasts slide in from the edge, stack three high, and the oldest slides out and collapses to make room as new ones keep arriving.

Nina Simonenow

Can you review the chorus mix before tonight?

Incoming Stack

Notifications drop in from the top and push the older ones back into a shrinking, fading stack, the way a phone lock screen piles them up.

Access request

Noah Reyes wants the records role

Approval Request Toast

An actionable notification card with an icon tile, a request line, and a pair of approve and decline buttons.

New booking confirmed

Rowan Blake · 09:00

now

Single Toast Card

A compact single-line toast with a tinted icon chip, a title and meta line, and a relative timestamp.

Activity

Rowan Blake confirmed

Intake · 09:00

2m

Invoice #4821 paid

$1,240 · Card

18m

Renewal due soon

3 members this week

1h

Activity Feed Card

A stacked activity feed where each row carries a tinted icon chip, a title and meta line, and a relative timestamp.

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.

Markdown version