NotificationCenter

Radix

A SaaS composite for in-app notifications. NotificationBell renders an IconButton with unread count badge that opens a Popover. Inside, NotificationCenter provides All/Unread tabs with a ScrollArea of NotificationItems. Each item shows avatar, title, relative timestamp, and actions.

SaaSnotificationbellinboxalertssaas

Bell with popover

import { NotificationBell } from '@primstack/ui/notification-center'

<NotificationBell
  notifications={[
    { id: '1', title: 'New signup', read: false, timestamp: new Date().toISOString() },
  ]}
  onMarkRead={(id) => markRead(id)}
/>

Related Components

Popover

Floating content panel anchored to a trigger.

overlayspopupfloating

Badge

Small status label with color variants.

data-displaylabelstatus

IconButton

Square button optimized for icon-only actions.

utilitiesiconaction

ScrollArea

Custom-styled scrollable area with thin scrollbars.

layoutscrolloverflow