Push Notification

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

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

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Notification3 } from "@/components/beste/piece/notification3";

<Notification3
  appName="Linear"
  title="New issue assigned"
  description="ENG-482 · Crash on checkout submit"
  time="now"
  image="https://oud.pics/sm/l/linear.jpeg"
  alt="Linear"
  tone="violet"
/>

More Notification pieces

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

Success Toast

notification1

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

Uploading64%
product-hero-final.mp4

Upload Toast

notification15

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

New booking confirmed

Rowan Blake · 09:00

now

Single Toast Card

notification19

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

Achievement unlockedShipped 10 pull requests this week
+250 XP

Achievement Toast

notification6

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

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

notification11

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

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

Alert Toast

notification2

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