Notification Center

Notification inbox. Free, MIT · Overlays and notifications › Messages and status

Installation

npx valyro-cli@latest add notification-center

npx shadcn@latest add https://valyro.xyz/r/notification-center.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { NotificationCenter } from 'valyro-ui';

Props

Prop	Type	Default
`notifications` *	`NotificationItem[]`		Items in display order; unread ones (`read` not set) drive the bell badge and the Unread filter.
`title`	`ReactNode`	`'Notifications'`	Panel heading; also its accessible name.
`onItemClick`	`(item: NotificationItem) => void`		Turns items into buttons; mark the item read yourself (e.g. set `read` and pass the list back).
`onMarkAllRead`	`() => void`		Shows the "Mark all read" button.
`footer`	`ReactNode`		Content under the list, e.g. a "View all" link.
`emptyMessage`	`ReactNode`	`'You’re all caught up'`	Shown instead of the list when the current filter has no items.
`labels`	`Partial<NotificationCenterLabels>`		Overrides for the built-in strings.
`locale`	`string`		BCP 47 locale for the relative times ("5 minutes ago") and counts. Defaults to the `ThemeProvider` locale, then English — the times are words, so they follow the (English) default labels.
`open`	`boolean`		Controlled `open`; use with `onOpenChange`.
`defaultOpen`	`boolean`	`false`	Initial `open` when uncontrolled.
`onOpenChange`	`(open: boolean) => void`		Called with the new `open` when it changes.
`placement`	`Placement`	`'bottom-end'`
`offset`	`number`
`matchAnchorWidth`	`boolean`
`closeOnOutside`	`boolean`
`closeOnEscape`	`boolean`
`insideRefs`	`RefObject<Element \| null>[]`		Extra elements treated as "inside" for outside-press detection. The anchor is included automatically.
`surface`	`boolean`		Apply the shared `.ui-floating` material (default true).
`animation`	`'pop' \| 'fade' \| 'spring' \| 'none'`		Enter/exit: `pop` (the theme's), `fade`, `spring` (springs out of the anchor's side) or `none`.

Related components

Alert — Inline alerts
Toast — Pop-up notifications
Loading Overlay — Loading screen
Dialog — Modal dialogs
Confirm Dialog — Action confirmation
Drawer — Slide-out panels
Bottom Sheet — iOS-style bottom sheet: snap points, swipe, peek mode
Popover — Floating content
Hover Card — Card on hover
Tour — Onboarding tour: element spotlight, steps, progress and resume

Previous: Toast · Next: Loading Overlay · All Overlays and notifications