Notification Center React component
A bell button with an unread badge that opens a notification panel: All and Unread tabs, Today and Earlier groups, unread dots, mark as read on click, mark all as read, per-item remove and full keyboard support.
About the Notification Center component
Notification Center is a bell button for an app header that opens an inbox of notifications. The bell shows the number of unread items (9+ above nine) and gives a little ring when new ones arrive. The panel lists notifications under group headings, each with an avatar or initials, who did what, an optional quote and a time, with tabs for All and Unread, a Mark all as read button and a remove button on each row.
items with onItemsChange control the list, or defaultItems lets it manage itself. Each item has an id, an actor, a title, a time label and optional body, group, avatar and read. Opening a row marks it as read and calls onItemClick, so you can navigate to it. open and onOpenChange control the panel, align lines it up with the bell's start or end edge, and title, width, emptyText and size set the rest.
When to use it
Use Notification Center in an app header to collect things that happened while someone was away: comments, invites, approvals, payouts. The badge says how many are new without interrupting, and the panel keeps them until they're read or removed.
Use a Toast Stack instead for feedback about something the person just did; those messages are fleeting, these are an inbox.
Installation
Add the Notification Center component to your project with the shadcn CLI. It lands in components/notification-center.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/notification-centerOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<NotificationCenter /> accepts 14 props, all optional.
| Prop | Type | Default |
|---|---|---|
| items | { id: string; actor: string; title: string; body?: string; time: string; group?: string; avatar?: string; read?: boolean }[] | — |
| defaultItems | { id: string; actor: string; title: string; body?: string; time: string; group?: string; avatar?: string; read?: boolean }[] | DEFAULT_ITEMS |
| onItemsChange | (items: NotificationItem[]) => void | — |
| onItemClick | (item: NotificationItem) => void | — |
| open | boolean | — |
| defaultOpen | boolean | false |
| onOpenChange | (open: boolean) => void | — |
| title | string | "Notifications" |
| align Which edge of the bell the panel lines up with. | "start" | "end" | "end" |
| size | "sm" | "md" | "lg" | "md" |
| theme | "dark" | "light" | "dark" |
| width | number | 380 |
- items{ id: string; actor: string; title: string; body?: string; time: string; group?: string; avatar?: string; read?: boolean }[]
- defaultItems{ id: string; actor: string; title: string; body?: string; time: string; group?: string; avatar?: string; read?: boolean }[]Default: DEFAULT_ITEMS
- onItemsChange(items: NotificationItem[]) => void
- onItemClick(item: NotificationItem) => void
- openboolean
- defaultOpenbooleanDefault: false
- onOpenChange(open: boolean) => void
- titlestringDefault: "Notifications"
- align
Which edge of the bell the panel lines up with.
"start" | "end"Default: "end" - size"sm" | "md" | "lg"Default: "md"
- theme"dark" | "light"Default: "dark"
- widthnumberDefault: 380
Show all 14 propsShow fewer
| emptyText | string | "You're all caught up." |
| className | string | — |
- emptyTextstringDefault: "You're all caught up."
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Notification Center FAQ
- How do I load my own notifications?
- Pass items and onItemsChange to control the list. Each item needs an id, actor, title and time; body, group, avatar and read are optional.
- How are items grouped?
- By their group field, in the order the groups first appear, so sort your list and set group to labels like "Today" and "Earlier".
- Does it work with the keyboard?
- Yes. The bell opens it, arrow keys move between rows, Enter opens a row, Delete removes one and Escape closes the panel and returns focus to the bell.
- How do I start with an empty inbox?
- Pass items={[]} (or defaultItems={[]}). Leaving both out shows the sample notifications from the demo.
