Notifications grouped by day with unread dots, a mark all as read button and hover actions to toggle read or dismiss a row.
Today
Yesterday
npx shadcn@latest add https://hyperblur.dev/r/list-notifications-grouped.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/list-notifications-grouped.tsx.
import { ListNotificationsGrouped } from "@/components/hyperblur/list-notifications-grouped"
<ListNotificationsGrouped onDismiss={(id) => console.log(id)} />| Prop | Type | Default | Description |
|---|---|---|---|
| groups | { id: string; label: string; items: { id: string; actor: string; title: string; body?: string; time: string; kind?: "comment" | "mention" | "approve" | "alert" | "invite"; unread?: boolean }[] }[] | Today and Yesterday examples | Groups with their notifications. The actor name seeds the initials avatar and kind picks the small badge. |
| title | string | "Notifications" | Heading of the panel. |
| onSelect | (item: NotificationItem) => void | Called when a row is clicked. Unread rows are marked read first. | |
| onMarkRead | (id: string, read: boolean) => void | Called when a row is marked read or unread. | |
| onMarkAllRead | () => void | Called when Mark all as read is pressed. | |
| onDismiss | (id: string) => void | Called when a row is dismissed. The row collapses out of the list. | |
| emptyTitle | string | "You're all caught up" | Heading of the empty state. |
| emptyText | string | "New activity will show up here." | Text under the empty state heading. |
| compact | boolean | false | Tighter rows and header for small panels. |
| accent | string | "#2f7bff" | Color of unread dots, the unread count and focus rings. |