Notification Settings
Notifications
Source and install need .
pnpm dlx shadcn@latest add @assembli/notification-centerNotification Center
An inbox behind a bell with an unread count: All, Mentions and Unread tabs, rows grouped by day with avatars or app tiles, rich text, unread dots, comment previews and Accept / Decline for invites. Mark all as read, per-row read and archive on hover or focus, an empty state per tab, arrow-key navigation and a fixed-height list that never jumps.
Props
Other props pass through to the root element.
defaultItems
NotificationItem[]
Default
SAMPLE_NOTIFICATIONSStarting notifications. The center keeps its own state from there and reports changes.
onItemsChange
(items: NotificationItem[]) => void
onInvite
(item: NotificationItem, answer: "accepted" | "declined") => void
Called when someone answers an invite.
open
boolean
defaultOpen
boolean
onOpenChange
(open: boolean) => void
side
"top" | "bottom" | "left" | "right"
Default
"bottom"align
"start" | "center" | "end"
Default
"end"listHeight
number
Default
420Height of the scrolling list, in px. It stays fixed so the panel never jumps as rows come and go.
footer
React.ReactNode
Default
"View all notifications"A footer link; leave it out to hide the footer.
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultItems | NotificationItem[] | SAMPLE_NOTIFICATIONS | Starting notifications. The center keeps its own state from there and reports changes. |
| onItemsChange | (items: NotificationItem[]) => void | – | |
| onInvite | (item: NotificationItem, answer: "accepted" | "declined") => void | – | Called when someone answers an invite. |
| open | boolean | – | |
| defaultOpen | boolean | – | |
| onOpenChange | (open: boolean) => void | – | |
| side | "top" | "bottom" | "left" | "right" | "bottom" | |
| align | "start" | "center" | "end" | "end" | |
| listHeight | number | 420 | Height of the scrolling list, in px. It stays fixed so the panel never jumps as rows come and go. |
| footer | React.ReactNode | "View all notifications" | A footer link; leave it out to hide the footer. |
