Back to components
Productivity component
Notification Center
Bell dropdown with real-time notifications, read/unread state, tabs, and clear-all.
Install
$ Run in your project root
pnpm dlx shadcn@latest add https://vibekit.desishub.com/r/notification-center.jsonWhat it does
- Bell icon with unread badge count
- All / Unread tabs
- Avatar + actor + timestamp per item
- Mark-as-read and clear-all actions
When to use
Use it
Apps with in-product notifications, alerts, activity feeds, or team mentions.
Skip it
Email-only notification flows or single-user apps with no events.
Prerequisites
- shadcn/ui (button, card, dropdown-menu, scroll-area, tabs, avatar, badge)