Notification Inbox
A Linear-style notification center with time-bucketed groups, unread accent rails, swipe-to-archive, mark-all-read, and a polished empty state.
Inbox
2Today
- ArchiveUnread
- ArchiveUnread
- Archive
Earlier
- Archive
- Archive
Swipe a row left to archive. Click to mark as read.
Installation
pnpm dlx shadcn@latest add "https://godui.design/r/notification-inbox.json"Notifications group by their group label with sticky headers and an unread
count badge. Drag a row left past the threshold to archive it; Mark all read
clears the unread state. An empty list shows a gentle caught-up state.
Usage
tsx
import { NotificationInbox } from "@/components/godui/notification-inbox";tsx
<NotificationInbox
notifications={items}
onRead={markRead}
onArchive={archive}
onMarkAllRead={markAllRead}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
notifications | Notification[] | — | Items to render, grouped by group. |
onRead | (id: string) => void | — | Fired when a row is clicked. |
onArchive | (id: string) => void | — | Fired when a row is swiped away. |
onMarkAllRead | () => void | — | Fired by the mark-all-read action. |
title | string | "Inbox" | Header title. |
Live Cursors
Smoothly interpolated multiplayer cursors with trailing name flags and optional cursor-chat — the signature "this app is alive" effect.
Presence Facepile
Live avatars with animated status rings, spring join/leave, and a +N overflow that expands into a presence list — who's online, idle, or typing right now.