NotificationBell

A bell that rings and pops its badge when the unread count goes up.

Installation

bash
npx shadcn@latest add https://www.rad-ui.com/r/notification-bell.json

React
import NotificationBell from "@/components/fx/notification-bell"

<NotificationBell count={unread} onClick={openInbox} />

The count is in the button's accessible name ("Notifications, 3 unread"), read on focus without live interruptions.
The badge number is aria-hidden to avoid reading it twice.
prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) updates the badge without ringing.

Prop	Type	Default	Description
count	number	—	Unread count.
getLabel	(count: number) => string	"Notifications, n unread"	Builds the accessible name.