About this piece
Notification Stack
Grouped inbox card showing three queued notifications behind two peeking cards above.
Usage
The import and the props worth knowing about, in one place.
import { Notification10 } from "@/components/beste/piece/notification10";
<Notification10
items={[
{
"icon": "heart",
"title": "3 new likes",
"description": "on your post about shipping velocity"
},
{
"icon": "message",
"title": "Alex replied",
"description": "in the #launch-prep thread"
},
{
"icon": "bell",
"title": "Daily standup",
"description": "starts in 10 minutes"
}
]}
/>More Notification pieces
View all NotificationWeekly product syncToday, 14:00 – 14:30
in 10 minGoogle Meet6
Calendar Reminder
Upcoming-meeting card with a starts-soon pill, video location, and attendee count.
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.
Activity
Rowan Blake confirmed
Intake · 09:00
Invoice #4821 paid
$1,240 · Card
Renewal due soon
3 members this week
Activity Feed Card
A stacked activity feed where each row carries a tinted icon chip, a title and meta line, and a relative timestamp.
@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.
