Notification Center
Hybrid toast stack and bell-triggered inbox: variants, actions, read/unread, filters, and optional persistence.
Default
Push sample toasts and inbox rows; bell opens the sheet with All / Unread and categories.
Try the notification center
Add items below, then open the bell for the inbox. Toasts stack at the top-right of this card.
Sign in to view this example's source code.
Sign inProps
| Name | Type | Default | Description |
|---|---|---|---|
| defaultToastDuration | number | 5000 | Auto-dismiss delay for ephemeral toasts (inbox entries remain) |
| persistKey | string | false | "notification-center" | localStorage key for inbox persistence, or false to disable |
| notifications | Notification[] | undefined | Controlled inbox; pair with onNotificationsChange |
| onNotificationsChange | (notifications: Notification[]) => void | undefined | Controlled mode handler |
| enableCategoryFilter | boolean | false | Show category tabs when notifications include category |
| toastPosition | "fixed" | "absolute" | "fixed" | Viewport-fixed toasts vs absolute within the provider (e.g. doc previews) |
| useNotificationCenter | hook | - | Returns addNotification, removeNotification, markAsRead, markAsUnread, markAllAsRead |