Mention Alert

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

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

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

Import & use
import { Notification5 } from "@/components/beste/piece/notification5";

<Notification5
  username="maya.dev"
  channel="#design-review"
  quote="Can you take a look at the new pricing layout when you're free?"
  time="5m ago"
/>

More Notification pieces

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

Calendar Reminder

notification12

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

Jordan Reyes
Jordan Reyes@jordan.r12 mutual connections

Follow Request

notification8

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

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

Comment Reply

notification14

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

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

Notification Stack

notification10

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

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

Message Preview

notification4

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

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.