Notification Inbox

A bell with an unread count that opens notifications grouped by day, with read state, mark all as read and per-item actions.

@drift-ui/notification-inboxRegistry JSON GitHub Open in v0

Keyboard

↑↓: Move between notifications
HomeEnd: First or last notification
Escape: Close and return focus

The CLI also installs the npm packages and registry items it builds on, and reads the style in your components.json to pick the Base UI or Radix build.

notification-inbox-usage.tsx

"use client"

import * as React from "react"
import { ArchiveIcon } from "lucide-react"

import { NotificationInbox, type InboxNotification } from "@/components/ui/notification-inbox"

export function Inbox({ initial }: { initial: InboxNotification[] }) {
  const [items, setItems] = React.useState(initial)

  return (
    <NotificationInbox
      items={items}
      onItemsChange={setItems}
      onMarkRead={(ids) => fetch("/api/notifications/read", { method: "POST", body: JSON.stringify({ ids }) })}
      onMarkAllRead={() => fetch("/api/notifications/read-all", { method: "POST" })}
      actions={[
        {
          label: "Archive",
          icon: <ArchiveIcon className="size-3.5" />,
          onSelect: (n) => setItems((current) => current.filter((item) => item.id !== n.id)),
        },
      ]}
    />
  )
}

NotificationInbox

A bell button that shows the unread count and opens notifications grouped by day, newest first. Up and Down arrows, Home and End move between items, and Escape closes the popover.

Prop	Type	Default
`itemsT[]`Controlled notifications. T extends InboxNotification, so extra fields reach renderItem and actions typed.	`T[]`
`defaultItemsT[]`Default`[]`Initial notifications when uncontrolled.	`T[]`	`[]`
`onItemsChange(items: T[]) => void`Called with the full list when read state changes: an unread item is opened, an item is marked read or unread, or Mark all as read runs. Opening a read item changes nothing, so track opens with onItemClick.	`(items: T[]) => void`
`onMarkRead(ids: string[]) => void`Called when an unread item is opened or its Mark as read button is pressed.	`(ids: string[]) => void`
`onMarkUnread(ids: string[]) => void`Called when Mark as unread is pressed on a read item.	`(ids: string[]) => void`
`onMarkAllRead() => void`Called by Mark all as read. onMarkRead is not called for it.	`() => void`
`onItemClick(notification: T) => void`Called when an item is opened, after it is marked read. The popover then closes.	`(notification: T) => void`
`actionsNotificationAction<T>[]`Default`[]`Extra icon buttons on each row, each { label, icon, onSelect(notification) }. If onSelect removes the item, focus moves to the next item.	`NotificationAction<T>[]`	`[]`
`renderItem(notification: T) => ReactNode`Replaces the content of each row. It renders inside the row's button or link, so it must not contain interactive elements. Defaults to NotificationItem.	`(notification: T) => ReactNode`
`openboolean`Controlled open state of the popover.	`boolean`
`defaultOpenboolean`Default`false`Initial open state when uncontrolled.	`boolean`	`false`
`onOpenChange(open: boolean) => void`Called when the popover opens or closes.	`(open: boolean) => void`
`nowDate`Reference time for the Today and Yesterday headings. Defaults to the current time when the popover renders.	`Date`
`localestring`Locale for day headings and times. Defaults to the browser locale.	`string`
`aria-labelstring`Default`"Notifications"`Panel heading and the trigger's accessible name, which adds the unread count.	`string`	`"Notifications"`

Other props go to the <button> (the trigger).

InboxNotification

One notification.

Prop	Type	Default
`id`Required`string`Unique id.	`string`
`title`Required`string`Main line. Also names the row's action buttons for screen readers.	`string`
`bodystring`Secondary text, clamped to two lines.	`string`
`createdAt`Required`Date \| string`Any value new Date() accepts. Sets the day group and the time. Items with an invalid date go last under Earlier.	`Date \| string`
`readboolean`Default`false`Unread items show a dot and count toward the badge.	`boolean`	`false`
`hrefstring`Renders the row as a link instead of a button.	`string`
`actor{ name: string; avatarUrl?: string }`Shows an avatar, with initials when there is no avatarUrl or it fails to load.	`{ name: string; avatarUrl?: string }`

NotificationItem

The default row content: avatar, title, body and time. Takes the InboxNotification fields, so <NotificationItem {...notification} /> works inside renderItem.

Prop	Type	Default
`localestring`Locale for the time.	`string`
`classNamestring`Classes for the content wrapper.	`string`

Controlled with actions

Own the items array and keep it in sync through onItemsChange. onMarkRead, onMarkUnread and onMarkAllRead report each change, for example to persist it, and actions add per-item buttons such as Archive.

Nothing yet

Custom item

renderItem replaces the content of each row. Extra fields on your items reach it typed, and NotificationItem renders the default title, body and time.

components/ui/notification-inbox.tsx