Notification Center

#Installation & usage

Use a notification center for things that happened while someone was away and that they'll act on later: mentions, invites, deploys, alerts. Press the bell to open it, or simulate an arrival and watch the bell swing and the count roll. For a message about something that just happened in front of the person, use a Toast. For a history of events on one object, use a Timeline.

import { NotificationCenter, type NotificationItem } from '@youj/react'

export function Inbox({ items }: { items: NotificationItem[] }) {
  return (
    <NotificationCenter
      notifications={items}
      onMarkRead={(id) => markRead(id)}
      onMarkAllRead={() => markAllRead()}
    />
  )
}

The center reads the list you pass and never changes it: marking read calls onMarkRead or onMarkAllRead, and you pass back the updated list. Each item has an id, a title and a time, and optionally:

• actor, the person who did it (their avatar shows beside it), or an icon for system events.
• body, a second line, clamped to two lines.
• read. Unread items carry a dot and count towards the badge.
• mention, which lists the item under Mentions.
• actions, buttons under the item, such as Reply or Accept.
• summary, plain text for announcements and toasts when title isn't a string.

It opens in a Popover aligned to the bell's end on desktop, and in a bottom Sheet below the md breakpoint.

#Arrivals and toasts

A notification whose id wasn't in the previous list is an arrival. If it's unread, the bell swings once and it's announced. With the panel open, it takes its slot at the top of the list and the rest glide down.

useNotificationToasts also shows a Toast for each arrival. Pass enabled: !open so arrivals toast only while the panel is closed, and render one <Toaster /> in the app, as the Demo story does.

import { useState } from 'react'
const [open, setOpen] = useState(false)
useNotificationToasts(items, { enabled: !open })

<NotificationCenter notifications={items} open={open} onOpenChange={setOpen} />

#Description

#Code