# Notification centre

A React component in [Beamline](https://beamline.io/)'s [Feedback](https://beamline.io/components/feedback) category. Live demo: https://beamline.io/components/notification-center

Updates that wait to be read: a bell with the unread count opens All / Unread, new and earlier groups, and per item mark read or dismiss.

## Use it for

- Mentions, results and alerts people read later.

## Not for

- Immediate feedback on an action ([toast](https://beamline.io/components/toast)).

## Anatomy

- bell with count
- panel header (filter, mark all)
- groups
- item (icon or avatar, title, line, time, unread dot, actions)
- empty state

## States

- unread
- read
- filtered
- empty

## Keyboard

- Tab through items and their actions
- Escape closes

## Motion

The panel grows from the bell. Opens out of its trigger (_shared/overlay.module.css, source morph): the layer starts as the trigger's own box, offset onto it, and grows; the side next to the trigger is there at once so the nearest rows read within the ruled 90 ms, the far side settles by ~200 ms, content fades in over 90 ms; it closes back into the trigger in 180 ms. Until it has grown the press that opened it cannot land on a row. Reduced motion: it appears.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `notifications` | `{ id, title, description?, time, tone?, actor?, read?, href?, earlier? }[]` | — |  |
| `onReadChange / onDismiss / onOpen` | `callbacks` | — |  |
| `open / onOpenChange / align` | `mixed` | — |  |
| `style / ref` | `CSSProperties / native Ref` | — |  |
| `classNames` | `NotificationCenterClassNames` | — |  |

## Dependencies

`@radix-ui/react-popover`, `lucide-react`

## Import

```tsx
import { NotificationCenter } from "@/components/notification-center/notification-center";
```

## Get it

Notification centre is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in Feedback

- [Alert](https://beamline.io/components/alert): A message that stays until it is dealt with: what happened, what to do, an action; danger and warning are announced; dismissing folds its height away.
- [Announcement bar](https://beamline.io/components/announcement-bar): A banner across the top for news and offers: messages take turns, a countdown ticks, and dismissing folds it away and can remember it.
- [Empty state](https://beamline.io/components/empty-state): What a place will hold and the first step to fill it, instead of a blank; a compact size for panels and filtered tables.
- [Progress](https://beamline.io/components/progress): How much of a known task is done, or a moving bar when the length is unknown, with an optional label and value.
- [Skeleton](https://beamline.io/components/skeleton): Holds the shape of content while it loads, then crossfades into it, so nothing jumps.
- [Spinner](https://beamline.io/components/spinner): A ring that spins while work runs and closes into a drawn check or cross when it ends.
- [Usage meter](https://beamline.io/components/usage-meter): An allowance and what fills it: one bar split by source, the room left, a warning near the limit and the overflow in its own red well past a notch at the…