Overlays & Tooltips

Notification Center

Bell-trigger inbox with unread badge and a scrollable list.

Import

tsx

import { NotificationCenter, NotificationList, NotificationRow } from "@cronus-ui/ui";

bash

npx cronus-ui add notification-center

Examples

Inbox

A bell-trigger inbox built on Popover. The badge counts unread items; clicking a row marks it read, and “Mark all read” clears them all. Pass an optional `footer` for a “View all” link.

tsx

const INITIAL: NotificationItem[] = [
  {
    id: "mention",
    title: "Ada mentioned you",
    description: "“@you can you review the payout rail PR?”",
    timestamp: "2m ago",
    icon: <MessageSquare aria-hidden="true" />,
  },
  {
    id: "star",
    title: "Your release hit 1,000 stars",
    description: "cronus-ui reached a new milestone.",
    timestamp: "1h ago",
    icon: <Heart aria-hidden="true" />,
  },
  {
    id: "invite",
    title: "New teammate joined",
    description: "Grace accepted your invite to Acme.",
    timestamp: "Yesterday",
    avatar: { fallback: "GR" },
    read: true,
  },
];

function NotificationCenterDemo() {
  const [items, setItems] = useState<NotificationItem[]>(INITIAL);

  return (
    <NotificationCenter
      notifications={items}
      onMarkAllRead={() => setItems((prev) => prev.map((i) => ({ ...i, read: true })))}
      onNotificationClick={(id) =>
        setItems((prev) => prev.map((i) => (i.id === id ? { ...i, read: true } : i)))
      }
      footer={
        <Button variant="link" size="sm" className="h-auto px-0">
          View all notifications
        </Button>
      }
    />
  );
}

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component NotificationCenterDefault layout:inline style:notification-center {
  label "Notifications"
  text "New comment"
  text "Payout sent"
}

page "/audit/notification-center/default" type:custom {
  use NotificationCenterDefault
}

API Reference

Generated from the component's exported types.

NotificationRowProps

Extends Omit<HTMLAttributes<HTMLButtonElement>, "id" | "title" | "onClick" | "onSelect">

Prop	Type	Default	Description
`notification`*	`NotificationItem`	—	—
`onSelect`	`(id: string) => void`	—	Fired with the notification id when the row is activated.
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.

NotificationListProps

Extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect">

Prop	Type	Default	Description
`notifications`*	`readonly NotificationItem[]`	—	—
`onSelect`	`(id: string) => void`	—	Fired with the notification id when a row is activated.
`emptyState`	`ReactNode`	—	Replaces the built-in "You're all caught up" empty state.
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

NotificationCenterProps

Extends Omit<ComponentPropsWithoutRef<typeof PopoverContent>, "onSelect" | "title">

Prop	Type	Default	Description
`notifications`*	`readonly NotificationItem[]`	—	Items to display in the inbox.
`onMarkAllRead`	`() => void`	—	Fired when the "Mark all read" affordance is activated.
`onNotificationClick`	`(id: string) => void`	—	Fired with the notification id when a row is activated.
`title`	`ReactNode`	`"Notifications"`	Header heading text.
`emptyState`	`ReactNode`	—	Custom empty-state content (defaults to "You're all caught up").
`footer`	`ReactNode`	—	Optional footer rendered below the list (e.g. a "View all" link).
`className`	`string`	—	Class names for the popover panel.
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.