KQ-524 · BELL/TRAY

Bell Tray

A notification bell and its tray. An arriving item swings the bell on recoil, rotated about its crown so it pivots where a bell hangs, and bumps the badge with the same spring; opening drops the tray on glide with its items cascading in under the 600ms budget. Marking all read sweeps the unread dots out one after another, dismissing an item collapses its row on the exit ease, and the bell is a button with aria-expanded whose tray answers to Up, Down and Escape.

KQ-524 · BELL/TRAY

Fernworks

Calibration sweep09:00
Bench 4 handover11:30
Vendor call · Basinworks14:00
Weekly digest cut17:15

2 unread of 3

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/bell-tray

Props

items: BellTrayItem[]; default —; Notifications of { id, title, time, unread }, newest first.
onRead: (ids: string[]) => void; default —; Fires with the ids that just became read — one id, or all of them.
onDismiss: (id: string) => void; default —; Fires when an item is dismissed; remove it from items to collapse the row.
open / defaultOpen: boolean; default false; Controlled or initial tray state.
onOpenChange: (open: boolean) => void; default —; Fires when the bell, Escape, or a click outside changes the tray.
className: string; default —; Applied to the bell's positioned wrapper.

Prop	Type	Default	Description
items	BellTrayItem[]	—	Notifications of { id, title, time, unread }, newest first.
onRead	(ids: string[]) => void	—	Fires with the ids that just became read — one id, or all of them.
onDismiss	(id: string) => void	—	Fires when an item is dismissed; remove it from items to collapse the row.
open / defaultOpen	boolean	false	Controlled or initial tray state.
onOpenChange	(open: boolean) => void	—	Fires when the bell, Escape, or a click outside changes the tray.
className	string	—	Applied to the bell's positioned wrapper.