Message Preview

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

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

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

Import & use
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"
/>