Grouped updates with unread filtering, individual and batch read actions, undo and a preferences slot.
Ada requested your review, unread
The new onboarding flow is ready for a closer look.
Version 2.4 is ready, unread
Your latest changes are live in the workspace.
Leo joined the team, read
pnpm dlx shadcn@latest add @latheui/notification-inboxPart of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.
Notification Inbox is part of Lathe Pro
The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.
Depends on
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Inbox" | Visible heading and accessible section name. |
| items / defaultItems | InboxNotification[] | [] (defaultItems) | Controlled or initial items, in display order. Use unique IDs. The component preserves the supplied group order. |
| onItemsChange | (items: InboxNotification[]) => void | — | Receives the updated list after read or undo actions. Persist controlled read state in your app. |
| preferences | React.ReactNode | — | Optional content for the preferences popover. Your app owns and persists these controls. |
| disabled | boolean | false | Disable read, undo and preferences actions. View filtering remains available. |
| className | string | — | Override the compact max-w-lg card. |
| InboxNotification | { id: string; title: string; description?: string; time: string; dateTime?: string; group: string; read?: boolean } | — | Notification record. time is a display label, dateTime is an optional ISO timestamp, and read defaults to false. |
Control items to reconcile server updates. Undo affects only the IDs changed by the most recent read action, preserving unrelated items.
<NotificationInbox
items={notifications}
onItemsChange={(next) => {
setNotifications(next)
saveReadState(next)
}}
preferences={<NotificationSettings />}
/>