A bell button with a popping badge, a ring on new items and an unread dropdown.
npx shadcn@latest add https://hyperblur.dev/r/notification-bell.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/notification-bell.tsx.
import { NotificationBell } from "@/components/hyperblur/notification-bell"
<NotificationBell
items={[
{ id: "1", title: "Sam commented on ORB-142", time: "2m" },
{ id: "2", title: "Sprint 24 started", time: "1h", read: true },
]}
onMarkAllRead={() => {}}
/>| Prop | Type | Default | Description |
|---|---|---|---|
| items | NotificationBellItem[] | required | Notifications with id, title, time and optional text and read flag. |
| count | number | Overrides the badge count. Defaults to the number of unread items. | |
| onMarkAllRead | () => void | Called when Mark all as read is pressed. | |
| onOpenChange | (open: boolean) => void | Called when the dropdown opens or closes. | |
| align | "left" | "right" | "right" | Which edge of the button the dropdown lines up with. |
| inline | boolean | false | Render the dropdown open and static below the button instead of floating. |
| color | string | "#2f7bff" | Accent color for the badge and unread dots. |