Notification Center

ProNew

A bell button with an unread badge that opens a popover of notifications grouped by day, with All and Unread tabs and per-row actions.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/notification-center

Prop	Type	Default	Description
`notifications`	`NotificationItem[]`	-	Notifications, newest first.
`onMarkRead`	`(id: string) => void`	-	Called when one is opened or checked off.
`onMarkAllRead`	`() => void`	-	Called by "Mark all as read".
`onDismiss`	`(id: string) => void`	-	Adds a dismiss button to each row.
`onOpenItem`	`(item: NotificationItem) => void`	-	Called when a row is chosen.
`open`	`boolean`	-	Controlled open state.
`defaultOpen`	`boolean`	-	Initial open state.
`onOpenChange`	`(open: boolean) => void`	-	Called when the panel opens or closes.
`label`	`string`	`"Notifications"`	Accessible name of the bell. The unread count is added.
`emptyText`	`string`	`"You're all caught up."`	Text when there is nothing to show.
`align`	`"start" \| "center" \| "end"`	`"end"`	Panel alignment.

Also accepts all <button> props (applied to the bell).

Prop	Type	Default	Description
`id`	`string`	-	Unique id.
`title`	`string`	-	What happened.
`description`	`string`	-	Optional detail line.
`time`	`string`	-	Time text such as "5m".
`group`	`string`	-	Group heading. Consecutive items with the same group are listed together.
`read`	`boolean`	-	Whether it was read.
`icon`	`React.ReactNode`	-	Leading icon or avatar.
`href`	`string`	-	Makes the row a link.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/notification-center

Prop	Type	Default	Description
`notifications`	`NotificationItem[]`	-	Notifications, newest first.
`onMarkRead`	`(id: string) => void`	-	Called when one is opened or checked off.
`onMarkAllRead`	`() => void`	-	Called by "Mark all as read".
`onDismiss`	`(id: string) => void`	-	Adds a dismiss button to each row.
`onOpenItem`	`(item: NotificationItem) => void`	-	Called when a row is chosen.
`open`	`boolean`	-	Controlled open state.
`defaultOpen`	`boolean`	-	Initial open state.
`onOpenChange`	`(open: boolean) => void`	-	Called when the panel opens or closes.
`label`	`string`	`"Notifications"`	Accessible name of the bell. The unread count is added.
`emptyText`	`string`	`"You're all caught up."`	Text when there is nothing to show.
`align`	`"start" \| "center" \| "end"`	`"end"`	Panel alignment.

Also accepts all <button> props (applied to the bell).

Prop	Type	Default	Description
`id`	`string`	-	Unique id.
`title`	`string`	-	What happened.
`description`	`string`	-	Optional detail line.
`time`	`string`	-	Time text such as "5m".
`group`	`string`	-	Group heading. Consecutive items with the same group are listed together.
`read`	`boolean`	-	Whether it was read.
`icon`	`React.ReactNode`	-	Leading icon or avatar.
`href`	`string`	-	Makes the row a link.