An iOS-style notification bell with an unread count badge.
Press plus to add a notification, minus to clear one. The bell swings when one lands and the count rolls to the new number. Add a few fast and it swings harder. The badge shrinks away at zero.
Options you can pass to customize this component.
countnumberUnread total on the badge. The badge is hidden at 0, and fractional or negative values are floored to it.
maxnumberHighest number shown. Anything above it displays as the max followed by a plus.
variantcountdotWhether the badge shows the number or a plain dot. The dot appears and leaves on the same counts.
sizenumberDiameter of the button in pixels. The bell, badge, and digits are all fractions of it.
colorredorangegreenbluevioletBadge color, from the Apple system palette. Each one swaps to its dark mode variant with the theme.
asChildbooleanUses your own child as the trigger instead of the built-in button, so the badge can sit on an avatar or a nav item. Your element should be round for the badge to line up, and the bell swing only runs on the built-in button.
classNamestringExtra classes merged onto the root element. Sizing is set inline from the size prop, so a width or height class here will not take effect.
npx shadcn@latest add swamimalode07/rare-ui/notification-bellimport { NotificationBell } from "@/components/ui/notification-bell"export function Demo() {return <NotificationBell count={8} />}// or wrap it in your own menu trigger<DropdownMenuTrigger asChild><NotificationBell count={8} /></DropdownMenuTrigger>
Click the code icon in the top-right corner to view the source code.
Most components here are recreations of great work from around the web. I don't claim to be the original creator - this is my attempt to reverse-engineer, replicate, and often add a few extra features. I've tried to credit everyone; if I missed someone, let me know.
1