About this piece
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.
Usage
The import and the props worth knowing about, in one place.
import { Notification23 } from "@/components/beste/piece/notification23";
<Notification23
label="Notifications"
previews={[
"Nina Simone mentioned you in #design",
"Miles Davis approved your pull request",
"Your invoice for September is ready",
"Patti Smith shared a folder with you",
"Deploy to production finished"
]}
tone="rose"
/>More Notification pieces
View all Notification12
NotificationsBell Badge
Bell icon with a pinging count badge that caps at 99+ and sits in a rounded pill.
Elena Park2m
Just pushed the redesign. Take a look when you have a sec 🙌Message Preview
Chat notification showing sender avatar, message snippet, timestamp, and an unread dot.
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.
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.
