# Notification center

> A bell with unread badge opening a panel with tabs, mark-all-read and dismiss.

Component · Pro · https://lodeui.com/components/notification-center

## When to use

- In-app notifications in a header.

## When not to use

- One-off confirmations: use a toast.

## Installation

```bash
npx shadcn@latest add @lode/notification-center
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="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 |
| --- | --- |
| Enter / Space | 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.

## Related

- [Toast](https://lodeui.com/components/toast) — Stacked notifications that fan out on hover, swipe to dismiss, and track promises.
- [Animated list](https://lodeui.com/components/animated-list) — A feed where new entries spring in at the top and older ones make room.
- [Popover](https://lodeui.com/components/popover) — An anchored panel for filters, forms and details.