A full notifications inbox with All, Mentions and Unread filters, day groups, mark as read, a snooze menu with undo, an empty state and a detail pane.
npx shadcn@latest add https://hyperblur.dev/r/app-notifications-center.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/app-notifications-center.tsx.
import { AppNotificationsCenter } from "@/components/hyperblur/app-notifications-center"
<AppNotificationsCenter onSnooze={(id, until) => console.log(id, until)} />| Prop | Type | Default | Description |
|---|---|---|---|
| items | AppNotification[] | sample feed | Notifications with id, actor, action, target, group, time, kind, unread, excerpt and project. Items are grouped by `group` in the given order. |
| defaultFilter | "all" | "mentions" | "unread" | "all" | Filter selected first. |
| defaultSelectedId | string | Notification shown in the detail pane at mount. Defaults to the first item. | |
| accent | string | "#2f7bff" | Color of unread dots, counters and primary buttons. |
| onMarkRead | (id: string, read: boolean) => void | Called when an item is marked read or unread. | |
| onSnooze | (id: string, until: string) => void | Called with the chosen snooze option. | |
| onOpenItem | (item: AppNotification) => void | Called when a notification is opened by click or Enter. |