Notification center
A home for updates with read state, grouped information, and animated disclosure.
npm install https://animui.stracture.net/__local/package.tgz- A bell in the app header with an unread badge and an inbox of recent updates.
- Notifications people can mark read, expand, and dismiss in bulk.
- Use toast-stack for transient messages that should disappear.
- Use inbox-triage for a full-page inbox.
- Use badge for a count without a panel.
Installation
Install animui once, then import any component or block from its typed package entry.
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { NotificationCenter } from 'animui/notification-center';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideUsage
Use it when updates need a persistent home instead of a brief toast. Connect read state to your data store.
import { NotificationCenter } from "animui/notification-center"; export function HeaderBell() { return ( <NotificationCenter notifications={[ { id: "1", title: "Deploy finished", time: "2m", tone: "success" }, { id: "2", title: "Ana commented", time: "1h", actor: { name: "Ana", photo: "/ana.jpg" } }, ]} onReadChange={(item, read) => markRead(item.id, read)} onDismiss={item => dismiss(item.id)} /> );}API reference
2 parts. The first is the root.
NotificationCenter
A bell trigger with an unread badge that opens a popover of notifications with All and Unread views, expandable rows, and bulk actions.
notificationsRequiredNotificationItem[]–Initial notifications. The component keeps its own copy after mount.labelstring"Notifications"Panel heading and trigger label.onReadChange(notification: NotificationItem, read: boolean) => void–Called for each item marked read or unread, including Mark all read.onDismiss(notification: NotificationItem) => void–Called for each dismissed item, including Clear read.openboolean–Controlled open state.onOpenChange(open: boolean) => void–Called when the popover opens or closes.avoidCollisionsbooleantrueLets the popover flip or shift to stay in the viewport.NotificationItem
Item type: { id: string; title: string; description?: string; time: string; read?: boolean; tone?: "info" | "success" | "warning"; actor?: { name: string; photo: string } }. actor shows an avatar instead of a tone icon.
No props.
- EnterorSpace
- Opens the panel from the trigger, toggles a row's details, and activates actions.
- Escape
- Closes the panel and returns focus to the trigger (Radix Popover).
- Tab
- Moves through view toggles, rows, and row actions.
- The trigger's aria-label includes the unread count; the visual badge is aria-hidden.
- The summary line is aria-live polite, and outgoing text copies are aria-hidden while they fade.
- Row toggles use aria-expanded and announce unread state; view toggles use aria-pressed.
- Focus moves to the next row, or a view toggle, after an item is read, dismissed, or cleared.
- The bell tilts when open; counts roll like an odometer in the direction of change.
- Rows open and collapse their own height on a spring, and bulk actions cascade down the list in under a quarter second.
- Reduced motion replaces height, roll, and tilt with instant fades.
- The panel is min(424px, 100vw minus 24px) wide and at most min(590px, 100vh minus 24px) tall, with the list scrolling inside.
- Below 380px padding tightens, the details indent shrinks, and the Mark all read label becomes icon only.
- Titles and previews ellipsize on one line.
- The list is not virtualized and keeps its own copy of the notifications; cap what you pass in.
- The panel mounts in a portal only while open.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use in an app header for an inbox of updates. Use toast or toast-stack for transient messages and inbox-triage for a full-page inbox.
- notifications seeds internal state; sync changes back to your server through onReadChange and onDismiss rather than re-passing the array.
The full library index for assistants is at /llms.txt.