NotificationCenter

Bell and panel

import { useState } from 'react';
import { Link } from '@rookcom/monarch-react';
import { NotificationCenter, type NotificationItem } from '@rookcom/monarch-react/collaboration';

const NOW = '2026-03-02T12:00:00Z';

const SAMPLE: NotificationItem[] = [
  {
    id: 'n1',
    title: 'Ana Lopez mentioned you in Launch checklist',
    description: '“Can you confirm the legal sign-off date?”',
    time: '2026-03-02T11:42:00Z',
    actor: { name: 'Ana Lopez' },
  },
  {
    id: 'n2',
    title: 'Ben Okafor assigned you Update pricing page',
    time: '2026-03-02T09:15:00Z',
    actor: { name: 'Ben Okafor' },
  },
  {
    id: 'n3',
    title: 'Chloé Martin replied to your comment',
    description: '“Agreed, let’s ship the shorter version.”',
    time: '2026-03-02T08:03:00Z',
    actor: { name: 'Chloé Martin' },
    read: true,
  },
  {
    id: 'n4',
    title: 'Your weekly export is ready',
    time: '2026-03-01T17:30:00Z',
    read: true,
  },
];

function Demo() {
  const [items, setItems] = useState(SAMPLE);
  const markRead = (id: string) =>
    setItems((list) => list.map((i) => (i.id === id ? { ...i, read: true } : i)));
  return (
    <NotificationCenter
      items={items}
      onMarkRead={markRead}
      onMarkAllRead={() => setItems((list) => list.map((i) => ({ ...i, read: true })))}
      onSelect={() => {}}
      hasMore
      onLoadMore={() => {}}
      footer={<Link href="#/components/notification-center">Notification settings</Link>}
      now={NOW}
      timeZone="UTC"
      align="start"
    />
  );
}

<Demo />

Usage examples

Custom trigger

import { Button } from '@rookcom/monarch-react';
import { NotificationCenter, type NotificationItem } from '@rookcom/monarch-react/collaboration';

const NOW = '2026-03-02T12:00:00Z';

const SAMPLE: NotificationItem[] = [
  {
    id: 'n1',
    title: 'Ana Lopez mentioned you in Launch checklist',
    description: '“Can you confirm the legal sign-off date?”',
    time: '2026-03-02T11:42:00Z',
    actor: { name: 'Ana Lopez' },
  },
  {
    id: 'n2',
    title: 'Ben Okafor assigned you Update pricing page',
    time: '2026-03-02T09:15:00Z',
    actor: { name: 'Ben Okafor' },
  },
  {
    id: 'n3',
    title: 'Chloé Martin replied to your comment',
    description: '“Agreed, let’s ship the shorter version.”',
    time: '2026-03-02T08:03:00Z',
    actor: { name: 'Chloé Martin' },
    read: true,
  },
  {
    id: 'n4',
    title: 'Your weekly export is ready',
    time: '2026-03-01T17:30:00Z',
    read: true,
  },
];

<NotificationCenter
  items={SAMPLE}
  trigger={<Button size="sm">Inbox · 2 unread</Button>}
  now={NOW}
  timeZone="UTC"
  align="start"
/>

Purpose

Gives every app the same in-app inbox: a bell in the header or rail that shows how many notifications are unread and opens a panel to read, open and clear them. The product supplies the items and handles reading and navigation.

Use when

An app header or icon rail that needs mentions, assignments and replies.
Any surface that marks notifications read when opened.

Avoid when

A full-page notifications inbox with bulk actions: build it from ActivityTimeline or a list.
Transient confirmations: use Toast.
Per-type delivery settings: use SwitchSettingsList on a settings page and link to it in footer.

Design principles

Unread is never colour alone: bold text, a dot and a hidden “Unread:” prefix.
The count on the bell is in its accessible name (“Notifications, 3 unread”), the visual badge is hidden.
One panel, two tabs: All and Unread, through Monarch TabsFilter, rather than separate pages.
Reading is the product’s decision: markReadOnSelect is on by default, and both read actions are callbacks.

API reference

import { NotificationCenter } from '@rookcom/monarch-react/collaboration';

Export	Kind	Rendering	Root class
`NotificationCenter`	component	client	`.mn-notification-center`

The ref and button attributes go to the built-in bell. With trigger, pass your own element and give it the count in its name.

open / defaultOpen / onOpenChange and filter / defaultFilter / onFilterChange work controlled or uncontrolled.

Items are filtered client-side by read on the Unread tab; refetch in onFilterChange when you page on the server.

Generated from the TypeScript declarations of packages/react/src/components/collaboration/notification-center.

Properties