Components

Notification bell

An iOS-style notification bell with an unread count badge.

Dependencies

motion@radix-ui/react-slot

Interaction Type

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.

Props

Options you can pass to customize this component.

Prop
Type
Description
count
number

Unread total on the badge. The badge is hidden at 0, and fractional or negative values are floored to it.

max
number

Highest number shown. Anything above it displays as the max followed by a plus.

variant
countdot

Whether the badge shows the number or a plain dot. The dot appears and leaves on the same counts.

size
number

Diameter of the button in pixels. The bell, badge, and digits are all fractions of it.

color
redorangegreenblueviolet

Badge color, from the Apple system palette. Each one swaps to its dark mode variant with the theme.

asChild
boolean

Uses 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.

className
string

Extra 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.

Installation

npx shadcn@latest add swamimalode07/rare-ui/notification-bell

How to use

import { 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>

Source Code

Click the code icon in the top-right corner to view the source code.

Keep in mind

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.

Contact

Found a bug or issue? Feel free to drop a DM.

License & Usage

  • •MIT with the Commons Clause and an attribution requirement. Free to use, modify and ship in personal and commercial projects, closed source included. You own the code once it is in your project.
  • •Credit is required. Any project shipping a Rare UI component must credit Rare UI with a visible link back to rareui.com, in a footer, an about page, a credits screen or a README.
  • •Don't strip the credit or the copyright notice from the source you copied.
  • •Don't sell, sublicense or redistribute the components themselves, on their own, bundled into a template, kit, theme or paid course, or ported to another framework.
  • •Don't republish them. No mirrors, no re-uploads, no listing them as your own work.
  • •Don't repackage the registry as a competing component library.
  • •Don't claim authorship of a component or of Rare UI itself.
  • •The LICENSE file in the repository is the full text and governs. Ask first if your use doesn't fit these rules.
Notification bell