Notification Center 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

Notification Center is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import NotificationCenter from @/components/ui/notification-center.

import { CreditCard } from "lucide-react"
import { NotificationCenter, NotificationList, type NotificationItem } from "@/components/ui/notification-center"

const notifications: NotificationItem[] = [
  {
    id: "n1",
    type: "mention",
    name: "Sophia Lee",
    avatar: "/demo/ioana-dumitrescu.jpg",
    title: "Sophia Lee mentioned you in “Acme Corp quote”",
    body: "@Emma Carter can you check the discount before we send it?",
    createdAt: "2026-09-23T10:42:00",
    href: "/quotes/Q-2026-118",
  },
  {
    id: "n2",
    icon: <CreditCard />,
    tone: "danger",
    title: "Your Pro plan payment failed",
    body: "The card ending in 4821 was declined.",
    createdAt: "2026-09-23T08:15:00",
    actions: [{ label: "Retry", onSelect: () => fetch("/api/billing/retry", { method: "POST" }) }],
  },
]

export function TopbarNotifications() {
  return (
    <NotificationCenter
      notifications={notifications}
      onRead={(ids) => console.log("read", ids)}
      onDismiss={(id) => console.log("dismiss", id)}
    />
  )
}

// the panel without the bell (full inbox page, sidebar panel): same content props, a header when title is set.
// it paints on var(--background); on a raised panel set [--nc-surface:var(--surface)] in className
export function InboxPage() {
  return <NotificationList title="Notifications" notifications={notifications} className="rounded-3xl border border-border" />
}

Props

• notificationsdefault "[]"
  NotificationItem[]

  Newest first. { id, title: ReactNode, body?, createdAt: Date | string | number, read?, type?, avatar?, name?, icon?, tone?, href?, actions?: NotificationAction[] }. NotificationAction is { label, onSelect: () => void | Promise<unknown>, variant?: "solid" | "soft" | "ghost", tone? }. String dates are parsed; invalid ones go last without a time. type "mention" feeds the Mentions tab, and @Name inside string titles and bodies is highlighted.

• onRead
  (ids: string[]) => void

  Rows turned read: from the row menu, a swipe right, opening a row or Mark all (when onReadAll is not set). The panel updates at once and keeps the change until your data agrees.

• onUnread
  (ids: string[]) => void

  Rows turned unread from the row menu or a swipe right on a read row.

• onReadAll
  () => void

  "Mark all as read" in the header (shown while anything is unread). Without it onRead gets every unread id.

• onDismiss
  (id: string) => void

  A row was dismissed (row menu or swipe left). Runs after the row has collapsed out, so remove it from your data here.

• onSelect
  (item: NotificationItem) => void

  A row was opened: it turns read, navigates to its href through NavLink and the panel closes.

• filters
  NotificationFilter[]

  The tabs, All / Unread / Mentions by default: { value, label, filter?: (item) => boolean, badge?, emptyTitle?, emptyText? }. A tab whose value is "unread" shows the unread count; each tab can have its own empty state. Fewer than two filters hide the tabs.

• filter
  string

  The active tab, controlled. Pair it with onFilterChange.

• defaultFilterdefault "all"
  string

  The tab it starts on while uncontrolled (a filter value).

• onFilterChange
  (filter: string) => void

  Fires when another tab is picked.

• titledefault "Notifications"
  ReactNode

  The panel title; it also names the dialog.

• markAllLabeldefault "Mark all as read"
  string

  The header button that clears every unread dot.

• emptyTitledefault "You're all caught up"
  string

  The empty state of a tab with nothing in it. A filter's own emptyTitle wins.

• emptyTextdefault ""
  string

  A second, muted line under the empty title.

• emptyIcon
  ReactNode

  Replaces the BellOff icon of the empty state.

• groupByDaydefault true
  boolean

  Sticky day labels: Today, Yesterday, weekday names this week, then dates in the locale. Off, rows show the date with the time.

• timeFormatdefault "relative"
  "relative" | "time"

  "5 min ago" through Intl.RelativeTimeFormat, refreshed every minute while open, or the clock time ("14:20"). Under an older day label rows show the clock time, so "Yesterday" is never said twice. Relative times are computed after mount: the server and hydration render print the clock time, so there is no mismatch.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The unread dots and the tab indicator.

• badgeTonedefault "danger"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The count badge on the bell. Red by default on purpose: people read a red count as unread.

• maxdefault 99
  number

  Counts above it read "99+".

• widthdefault 400
  number

  The desktop panel width in px (never wider than the screen minus 24px).

• badgeRingColordefault "var(--bar-bg, var(--background))"
  string

  The 2px ring that cuts the badge out of the bell: the surface the bell sits on.

• countdefault ""
  number

  Overrides the badge number (default: the unread count). 0 hides the badge. The playground's empty control means left out.

• loadingdefault false
  boolean

  Skeleton rows while the list is empty, a spinner row after the last one otherwise.

• hasMoredefault false
  boolean

  Shows the "Load more" row at the end, which also loads by itself when it scrolls into view.

• onLoadMore
  () => (void | Promise<unknown>)

  Loads the next page. A returned promise keeps a spinner in the row until it settles.

• defaultOpendefault false
  boolean

  Starts open (uncontrolled).

• open
  boolean

  Controlled open state. Pair it with onOpenChange.

• onOpenChange
  (open: boolean) => void

  Fires when the panel opens or closes.

• ringOnNewdefault true
  boolean

  The bell swings from its top when the unread count goes up (never under reduced motion).

• swipeActionsdefault true
  boolean

  Swipe a row left to dismiss it, right to toggle read. Follows the finger and commits past a quarter of the row or on a flick.

• responsivedefault true
  boolean

  Below 768px the panel is a full-height bottom sheet with full-width tabs.

• sidedefault "bottom"
  "top" | "right" | "bottom" | "left"

  Where the desktop panel opens; it flips when there is no room.

• aligndefault "end"
  "start" | "center" | "end"

  The panel's alignment against the bell. end suits a bell at the right of a top bar.

• shortcutdefault ""
  string

  A key combo in mod+k notation that opens and closes the panel from anywhere (none by default).

• localedefault ""
  string

  Dates, weekdays and relative times. Empty uses the LocaleProvider or the browser.

• settingsHrefdefault ""
  string

  Adds a gear link in the header (a NavLink), e.g. to notification settings.

• onSettings
  () => void

  Adds a gear button in the header, or runs before the settingsHref link.

• trigger
  ReactNode

  A custom trigger instead of the bell, rendered with asChild (one element that takes a ref).

• linkComponent
  (props: LinkComponentProps) => ReactNode

  The router link for rows with href and the settings link; default from LinkProvider.

• container
  HTMLElement | null

  Portal target for the panel and the sheet (default document.body).

• labels
  { trigger?: (unread) => string; markRead?; markUnread?; dismiss?; more?; loadMore?; loading?; settings?; filters?; unread?; earlier?; newNotification?: (title) => string }

  Every other string, English by default: the bell's label ("Notifications, 3 unread"), the row menu, the swipe layers, load more, the live announcement for new notifications.

• classNames
  Partial<Record<"trigger" | "badge" | "content" | "header" | "title" | "markAll" | "settings" | "tabs" | "list" | "group" | "groupLabel" | "item" | "media" | "body" | "time" | "actions" | "empty" | "footer", string>>

  Extra classes for the inner parts.

• className
  string

  Extra classes for the bell button. Other props (aria-*, data-*, handlers) go to the bell too.

Parts

FAQ

Used in

More React feedback components