Notification centerPro
A bell with unread badge opening a panel with tabs, mark-all-read and dismiss.
When to use
- In-app notifications in a header.
When not to use
- One-off confirmations: use a toast.
Installation
Usage
Import it from @/components/ui/notification-center after installing.
example.tsx
import { NotificationCenter } from "@/components/ui/notification-center";
<NotificationCenter notifications={items} categories={["Mentions"]} onChange={save} />API reference
NotificationCenter
A bell button and a panel of notifications with tabs.
| Prop | Type | Default | Description |
|---|---|---|---|
| notifications | { id; title; body?; time; read?; icon?; category? }[] | – | Initial list, newest first. |
| onChange | (list) => void | – | After read or dismiss, for syncing. |
| categories | string[] | – | Extra tabs besides All and Unread. |
Keyboard interactions
| Keys | Action |
|---|---|
| EnterorSpace | Open the panel |
| Tab | Move through tabs and notifications |
| Esc | Close |
Accessibility
- The bell is named with the unread count.
- The panel is a labelled dialog; tabs use aria-selected; dismiss buttons name the notification.
Motion
- The bell wiggles when the count changes; the panel scales in; dismissed items slide out and the list closes the gap.
Responsive behavior
- Up to 368px, never wider than the screen minus 32px.
Performance
- The list scrolls past 384px.
Notes for AI
- Mark read on the server in onChange.
This page as Markdown, for assistants and coding agents:
/components/notification-center/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt