Message Preview

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

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

New here? Read the installation guide.

Import & use
import { Notification4 } from "@/components/beste/piece/notification4";

<Notification4
  sender="Elena Park"
  message="Just pushed the redesign. Take a look when you have a sec 🙌"
  initials="EP"
  time="2m"
  unread={true}
  image="https://images.unsplash.com/photo-1717853358193-216ad30189ab?w=80&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8ZWxlbmF8ZW58MHx8MHx8fDA%3D"
/>

More Notification pieces

View all Notification
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.

@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.

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.

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.

Jordan Reyes
Jordan Reyes@jordan.r12 mutual connections

Follow Request

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

12
Notifications

Bell Badge

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

Markdown version