Chat notification showing sender avatar, message snippet, timestamp, and an unread dot.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
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"
/>Inbox row with sender, subject line, two-line body preview, attachment clip, and star.
You-were-mentioned card with the channel context and the quoted message.
Grouped inbox card showing three queued notifications behind two peeking cards above.

Mobile-style push toast with app icon tile, timestamp, and a two-line preview.
Incoming request card with avatar, handle, mutual-connections line, and accept or decline buttons.
Bell icon with a pinging count badge that caps at 99+ and sits in a rounded pill.