asafefe.dev

Notification Inbox

New

A bell with an unread counter that opens an inbox grouped by day. Mark rows read or archive them on hover, or swipe left on touch.

motionlucide-reactutils@soultel/use-reduced-motion-safe
AAcme

Installation

$ pnpm dlx shadcn@latest add @soultel/notification-inbox

No namespace set up? npx shadcn@latest add https://asafefe.dev/r/notification-inbox.json works too.

Manual installation
  1. 1. Install the dependencies.
    terminal1 lines
    npm install motion lucide-react
  2. 2. Copy the source from the Code tab into components/notification-inbox.tsx.

Usage

example.tsx11 lines
import { NotificationInbox, type InboxNotification } from "@/components/notification-inbox"

export function Header({ items }: { items: InboxNotification[] }) {
  return (
    <NotificationInbox
      defaultNotifications={items}
      onNotificationsChange={(list) => syncReadState(list)}
      onNotificationClick={(n) => router.push(`/activity/${n.id}`)}
    />
  )
}

Props

PropTypeDefaultDescription
notifications / defaultNotificationsInboxNotification[]-Newest first: id, title, body, date, read, actor, icon.
onNotificationsChange(list) => void-Called when rows are read, unread or archived.
onNotificationClick(notification) => void-Called on click, after marking it read.
open / defaultOpen / onOpenChangeboolean-Controlled or initial panel state.
nowstring | Date-Reference time for day groups. Pass a fixed value when server rendering.
align"start" | "end""end"Which edge of the bell the panel lines up with.
footerReactNode-Content under the list, like a View all link.