Notification Banner 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 Banner 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 NotificationBanner from @/components/ui/notification-banner.

import { useEffect, type ReactNode } from "react"
import { ShoppingCart } from "lucide-react"
import { NotificationBanner, notify } from "@/components/ui/notification-banner"

const usd = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 })

export function CrmShell({ children }: { children: ReactNode }) {
  return (
    <>
      {children}
      <NotificationBanner
        appName="Northwind CRM"
        labels={{ queued: (n) => `+${n} waiting` }}
      />
    </>
  )
}

export function useNewOrders(orders: { id: number; total: number; locker: string }[], openOrder: (id: number) => void) {
  useEffect(() => {
    const order = orders.at(-1)
    if (!order) return
    notify({
      id: `order-${order.id}`,
      title: "New order",
      message: `Order #${order.id} · ${usd.format(order.total)} · ${order.locker}`,
      icon: <ShoppingCart />,
      tone: "success",
      onPress: () => openOrder(order.id),
      actions: [{ label: "View order", onSelect: () => openOrder(order.id) }],
    })
  }, [orders, openOrder])
}

Props

• positiondefault "top-right"
  "top-center" | "top-right" | "top-left"

  Where the card sits once the host is at least 576px wide (a container query, so a phone frame on a desktop still gets the phone layout). Narrower, banners always span the top with 8px gutters.

• strategydefault "fixed"
  "fixed" | "absolute"

  fixed pins the host to the viewport (the app default). absolute places it inside a relative container: a phone frame, an embedded panel.

• widthdefault 380
  number

  Card width in px in the wide layout. Phones always use the full width minus the gutters.

• offsetdefault 8
  number

  px below the top safe area. In the wide layout it is also the distance from the side.

• safeAreadefault true
  boolean

  Pads env(safe-area-inset-top) so banners drop in under the notch or the Dynamic Island. It is 0 in desktop browsers and iframes.

• variantdefault "glass"
  "glass" | "solid"

  glass: a translucent popover with a strong backdrop blur, like iOS (solid where backdrop-filter is missing). solid: the plain popover surface.

• radiusdefault "lg"
  "sm" | "md" | "lg"

  Card corners: sm 12px, md 16px, lg 24px (iOS). The action buttons and the media tile follow.

• showAppHeaderdefault true
  boolean

  The row with the app icon, the app name and the time. Off, the time moves next to the title (a compact chat banner).

• appNamedefault ""
  string

  The app name in the header of every banner (a banner's own appName wins). The app icon shows its first letter on the tone's fill; empty shows a bell.

• appIcon
  ReactNode

  Replaces the letter tile in the header (a 20px logo). A banner's own appIcon wins.

• durationdefault 5000
  number

  ms a banner stays before it leaves. The clock pauses while it is hovered, held, focused or expanded. A banner's own duration or sticky wins.

• expandabledefault true
  boolean

  Pull down, the chevron, a tap on a banner without onPress, or ArrowDown show the full text and the actions. Off, the actions never show.

• maxQueuedefault 5
  number

  How many banners may wait behind the one on screen. Past it the oldest queued banner is dropped (its onDismiss runs with "dropped").

• hapticsdefault true
  boolean

  A light tick when a banner arrives (only once the page has seen a tap) and a selection tick when it expands. Through lib/haptics.

• hotkeydefault "alt+n"
  string

  Moves focus to the banner on screen; Escape then dismisses it and returns focus. Empty turns it off.

• pauseWhenPageIsHiddendefault true
  boolean

  Timers stop while the tab is in the background, so a banner sent then is still there when you come back.

• hostIddefault ""
  string

  Shows only banners sent with notify({ hostId }). Several independent hosts on one page (a phone preview next to the app). A second host with the same id stays empty.

• localedefault ""
  string

  Formats the time ("2 min ago", "il y a 2 min") through relative-time. Empty uses the UIProvider locale, then the page language.

• labels
  Partial<NotificationBannerLabels>

  Every string: region "Notifications", dismiss "Dismiss", expand "Show more", collapse "Show less", queued(n) "{n} more", now "now", hint "Swipe up to dismiss, pull down for more" (read with each banner). DEFAULT_NOTIFICATION_BANNER_LABELS has the English set.

• classNames
  Partial<Record<"item" | "header" | "body" | "media" | "title" | "message" | "actions" | "action" | "close" | "expand", string>>

  Extra classes for the parts of every banner.

• className
  string

  Extra classes for the host section (the full-width layer at the top).

Parts

FAQ

More React mobile components