Skip to content
Mox UI

Notification bell

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

Installation

  1. 1

    Install the packages

    pnpm add motion @radix-ui/react-slot clsx tailwind-merge
  2. 2

    Add the utility file

    lib/utils.ts
    import { clsx, type ClassValue } from "clsx";import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {  return twMerge(clsx(inputs));}
  3. 3

    Copy and paste the code into your project

    Loading source…
  4. 4

    Update the import paths to match your project

    Point @/lib/utils to your utility file if your path aliases differ.

Usage

app/page.tsx
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>

Options

Pick a value to see the prop you would pass. Defaults are left out.

variant
color
snippet.tsx
<NotificationBell />

Props

PropTypeDefaultDescription
countnumberDefault: 0Unread total on the badge. The badge is hidden at 0, and fractional or negative values are floored to it.
maxnumberDefault: 99Highest number shown. Anything above it displays as the max followed by a plus.
variant"count" | "dot"Default: "count"Whether the badge shows the number or a plain dot. The dot appears and leaves on the same counts.
sizenumberDefault: 48Diameter of the button in pixels. The bell, badge, and digits are all fractions of it.
color"red" | "orange" | "green" | "blue" | "violet"Default: "red"Badge color, from the Apple system palette. Each one swaps to its dark mode variant with the theme.
asChildbooleanDefault: falseUses 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.
classNamestringDefault: -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.

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.

Credits and license

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.

  • Free to use and modify in both personal and commercial projects.
  • Attribution to Mox UI is appreciated when using a component.
  • Please don't resell the components as your own kit.
Contact Mox UI