Notifications

Render unread indicators, popovers, and full notification panels in TanStack Router.

`<NotificationBell/>`

<NotificationBell /> is the compact header trigger for unread notifications. It reads the unread count, shows the badge when needed, and opens the notification popover.

export default function Header() {  return (    <header className="flex items-center justify-end gap-3 border-b border-border px-6 py-4">      <NotificationBell />    </header>  );}

`<NotificationPopover/>`

<NotificationPopover /> is the dropdown-sized notification surface. It is the same content as the panel, just mounted as a floating popover instead of a full-width page block.

export default function Header() {  return (    <div className="relative">      <NotificationPopover scope="all" />    </div>  );}

`<NotificationPanel/>`

<NotificationPanel /> is the full notification surface. It shows the inbox tabs, unread filter, bulk actions, and the notification list itself.

export default function NotificationsPage() {  return <NotificationPanel fullWidth />;}

›

scope?: NotificationListParams['scope'] | undefined;

Limits the notifications to a single scope or shows the aggregate inbox.

›

onAction?: (payload: any) => void | undefined;

Called when the panel emits an action from a notification CTA.

›

fullWidth?: boolean | undefined;

Expands the panel to fill the available width instead of using the compact popover width.

›

maxHeight?: string | undefined;

Controls the maximum panel height when you embed it in a fixed surface.

›

className?: string | undefined;

Optional class name for custom styling.