Skip to Content

notification-bell

ui

A notification bell icon with unread count badge and a popover panel listing notifications.

Use cases

  • Header notification center
  • Real-time update alerts
  • System announcements
  • Activity notifications

Features

  • Unread count badge (9+ overflow)
  • Popover notification list with scroll area
  • Read/unread visual states with cobalt accent dot
  • Mark all as read action
  • View all link
  • Empty state message

Preview

Interactive preview with light/dark mode toggle. Switch to Code tab to view the full source.

3

3 unread notifications

Installation

npx shadcn@latest add https://registry.mukoko.com/api/v1/ui/notification-bell

Dependencies

lucide-reactbuttonpopoverscroll-areaseparator

API

Fetch this component's metadata and source code from the registry API.

GET/api/v1/ui/notification-bell

Source

components/ui/notification-bell.tsx