About this piece
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.
Usage
The import and the props worth knowing about, in one place.
import { Notification21 } from "@/components/beste/piece/notification21";
<Notification21
items={[
{
"kind": "message",
"title": "Nina Simone",
"body": "Can you review the chorus mix before tonight?"
},
{
"kind": "payment",
"title": "Payment received",
"body": "$1,240.00 from Miles Davis"
},
{
"kind": "calendar",
"title": "Rehearsal in 10 min",
"body": "Studio B, with Björk and Prince"
},
{
"kind": "alert",
"title": "Build failed",
"body": "main: 2 tests failing in checkout"
},
{
"kind": "message",
"title": "Patti Smith",
"body": "Loved the new arrangement, sending notes"
}
]}
/>More Notification pieces
View all Notification
Linearnow
New issue assignedENG-482 · Crash on checkout submitPush Notification
Mobile-style push toast with app icon tile, timestamp, and a two-line preview.
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.
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.