Tocsin
Notification center block: a bell whose unread badge rolls on Tally digit drums and swings once when something arrives, opening an anchored dialog (or inline panel) with All / Mentions / Archived tabs on Detent, sticky Today / Yesterday / Earlier groups, rich-text rows with avatars or system glyphs, inline Accept/Decline that collapse into a receipt, swipe-left or hover-button archive with a height collapse, staggered Mark all read, and push() that slides new items in with an accent flash. Roving keyboard focus with R / E shortcuts and a polite live region.
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/tocsinManual — install dependencies, then copy the source
npm install motionProps
| Prop | Type | Default | Description |
|---|---|---|---|
| items | TocsinItem[] | a seeded sample inbox | Initial notifications (the inbox owns read/archived state afterwards and reports it through the callbacks). Passing a new array resets the inbox. |
| onAction | (item: TocsinItem, actionId: string) => void | Promise<unknown> | Fired when an inline action is clicked. Return a Promise to hold the button in a pending state — resolve collapses the actions into the receipt line; reject shows the rejection message inline. | |
| onRead | (item: TocsinItem, read: boolean) => void | Fired when a notification is marked read (read: true) or unread (read: false). | |
| onArchive | (item: TocsinItem, archived: boolean) => void | Fired when a notification is archived (archived: true) or restored (archived: false). | |
| onItemsChange | (items: TocsinItem[]) => void | Fired after every change with the full list. | |
| inline | boolean | false | Render the panel in place (no bell trigger / popover). |
| open | boolean | Controlled popover state. | |
| onOpenChange | (open: boolean) => void | Popover open-state changes (bell click, Escape, outside click, open()/close()). | |
| align | "start" | "end" | "end" | Popover edge aligned to the bell. |
| title | string | "Notifications" | Panel heading. |
| shortcuts | boolean | true | Show the keyboard-shortcut footer (hidden below ~420px wide regardless). |
| accentColor | string | "#fb7185" | The single accent: badge, unread dots, focus rings, new-item flash, primary actions. Any CSS color; hex gets auto-contrast ink. |
| ref | React.Ref<TocsinHandle> | Imperative handle — push(), open(), close(), markAllRead(), replay(), getItems(). | |
| className | string | Classes for the root (the panel in inline mode, the trigger wrapper otherwise). | |
| panelClassName | string | Classes for the panel (popover mode) — e.g. a width or height. |
Honors prefers-reduced-motion with a designed static fallback, and passes className through.