Notification Bell React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Usage

Import NotificationBell from @/components/ui/notification-bell.

import { NotificationBell } from "@/components/ui/notification-bell"

export function Demo() {
  return <NotificationBell count={8} />
}

// or wrap it in your own menu trigger (shadcn dropdown-menu):
// <DropdownMenuTrigger asChild>
//   <NotificationBell count={unread} />
// </DropdownMenuTrigger>

Props

• countdefault 0
  number

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

• maxdefault 99
  number

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

• variantdefault "count"
  "count" | "dot"

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

• sizedefault 48
  number

  Diameter of the button in pixels. The bell, badge, and digits are all fractions of it. Below 44px the button keeps a 44px hit area on touch screens.

• colordefault "red"
  "red" | "orange" | "green" | "blue" | "violet" | string

  Badge color: a name from the Apple system palette (each swaps to its dark mode variant with the theme) or any CSS color.

• badgeTextColordefault "#ffffff"
  string

  Any CSS color for the digits in the badge.

• surfaceColordefault ""
  string

  Any CSS color for the round button. Empty uses #F4F4F9 light, #262626 dark.

• iconColordefault ""
  string

  Any CSS color for the bell glyph. Empty uses #868593 light, #9B9AA7 dark.

• ringStrengthdefault 1
  number

  How hard the bell swings when the count goes up: 0 keeps it still, 1 is the original swing, 2 twice the kick.

• labeldefault "Notifications"
  string

  What screen readers hear with no unread notifications; also the button's name.

• unreadLabeldefault "Notifications, {count} unread"
  string

  What screen readers hear with unread notifications; {count} fills in, e.g. "{count} unread notifications".

• asChilddefault false
  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.

• children
  ReactNode

  The custom trigger when asChild is set. Ignored otherwise.

• className
  string

  Extra classes merged onto the root element; other button props are spread onto it too. Sizing is set inline from the size prop, so a width or height class here will not take effect.

Parts

FAQ

More React feedback components