Notification

Feedback

A bell trigger with an unread badge and a dropdown list.

The Notification bundles a trigger button, an unread count badge, and a popover list. It is built on the Base UI Popover for focus management and positioning.

npx shadcn@latest add notification

Unread count

The badge reflects the number of unread items.

Preview

Live

tsx

1<Notification count={2} items={items} />

Mark all read

Pass onMarkAllRead to let users clear the unread state in one click.

Preview

Live

tsx

1<Notification
2  count={unread}
3  items={items}
4  onMarkAllRead={() => setItems(clearUnread)}
5/>

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
count	number= 0	Number shown in the unread badge. Hidden when 0.
items	NotificationItem[]	Items rendered in the dropdown, each with id, title, description, time, and unread.
onOpen	() => void	Called when the popover opens. Useful to fetch fresh items.
onMarkAllRead	() => void	Renders a Mark all read action that calls this.
className	string	Custom classes for the trigger button.