Notification Center Dropdown
A bell icon dropdown showing grouped notifications with read/unread states and mark-all-read functionality.
Prompt
Create a notification center dropdown triggered by a bell icon button with: - Bell icon button with unread count badge - Dropdown panel: "Notifications" title, "Mark all read" link - Grouped by time: "Today", "Yesterday", "This Week" - Each notification: avatar or icon, title, description, timestamp - Unread notifications have a blue left border - Click to mark as read - "View all notifications" link at the bottom - Empty state when all read - Smooth dropdown animation - Use shadcn/ui Popover, Tailwind CSS
Share:Share on X
More Notifications Prompts
A toast notification system with multiple types, auto-dismiss, and a stacked queue.
A multi-step progress indicator for order tracking or process flows, with animated state transitions.