Product block

Notification Inbox Panel

The bell panel: filterable list with read state, the unread count in the accessible name rather than only in a badge, and machine-readable timestamps beside the human ones.

255 lineslucide-reactAdded 8 Aug 2026Updated 10 Sept 2026

notifications
inbox
bell
activity
unread

What's included

components/notification-inbox.tsx
Needs lucide-react

Works with

React
Next.js
Tailwind CSS
TypeScript

npx hoverlab add notification-inbox

Or over MCP, from your editor's agent — no account needed.

License

Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.

Was this useful?

Start a page with this section — add more, order them, and leave with the page source.

Preview

Notifications, 3 unread

allunread (3)

Ada Lovelace mentioned you in “Q3 roadmap”
18m ago
Grace Hopper requested your review on #482
2h ago
System Usage reached 80% of your monthly quota
11h ago
Alan Turing invited you to the Platform team
18h ago
Katherine Johnson replied to your comment on #470
2d ago

Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.

Source

components/notification-inbox.tsx

'use client'

/**
 * <NotificationInbox> — the bell panel: a filterable list with read state.
 *
 * A toast is for right now; this is for what you missed. The difference
 * drives every decision here — nothing auto-dismisses, everything is
 * scannable, and unread is a state you can act on rather than a colour
 * that fades.
 *
 * Worth keeping:
 *
 *  - The unread count is in the trigger's accessible name ("Notifications,
 *    3 unread"), not only in a badge. A number rendered in a coloured
 *    circle is invisible to a screen reader.
 *  - The filter is a `<fieldset>` of radios styled as a segmented control,
 *    so arrow keys move between All and Unread and the group announces as
 *    one control instead of three unrelated buttons.
 *  - Unread is marked by a dot *and* by `sr-only` text, never by colour
 *    alone.
 *  - Timestamps are `<time dateTime>` with a machine-readable value beside
 *    the human "2h ago", so the real time survives copy-paste and is
 *    available to assistive tech.
 *  - "Mark all read" is announced through a polite live region, because
 *    otherwise the only feedback is dots disappearing.
 */

import * as React from 'react'
import { Bell, CheckCheck, GitPullRequest, MessageSquare, TriangleAlert, UserPlus } from 'lucide-react'

export type NotificationKind = 'mention' | 'review' | 'alert' | 'invite'

export interface NotificationItem {
  id: string
  kind: NotificationKind
  actor: string
  text: string
  /** ISO timestamp — the `datetime` attribute value. */
  at: string
  /** Human relative label. Kept as data so this component stays dependency-free. */
  ago: string
  read?: boolean
  href?: string
}

export interface NotificationInboxProps {
  items?: NotificationItem[]
  emptyMessage?: string
  onMarkAllRead?: () => void
  className?: string
}

const KIND_ICON: Record<NotificationKind, typeof Bell> = {
  mention: MessageSquare,
  review: GitPullRequest,
  alert: TriangleAlert,
  invite: UserPlus,
}

const DEFAULT_ITEMS: NotificationItem[] = [
  {
    id: '1',
    kind: 'mention',
    actor: 'Ada Lovelace',
    text: 'mentioned you in “Q3 roadmap”',
    at: '2026-08-08T09:12:00Z',
    ago: '18m ago',
    href: '#',
  },
  {
    id: '2',
    kind: 'review',
    actor: 'Grace Hopper',
    text: 'requested your review on #482',
    at: '2026-08-08T07:40:00Z',
    ago: '2h ago',
    href: '#',
  },
  {
    id: '3',
    kind: 'alert',
    actor: 'System',
    text: 'Usage reached 80% of your monthly quota',
    at: '2026-08-07T22:05:00Z',
    ago: '11h ago',
    href: '#',
  },
  {
    id: '4',
    kind: 'invite',
    actor: 'Alan Turing',
    text: 'invited you to the Platform team',
    at: '2026-08-07T15:30:00Z',
    ago: '18h ago',
    read: true,
    href: '#',
  },
  {
    id: '5',
    kind: 'mention',
    actor: 'Katherine Johnson',
    text: 'replied to your comment on #470',
    at: '2026-08-06T11:02:00Z',
    ago: '2d ago',
    read: true,
    href: '#',
  },
]

type Filter = 'all' | 'unread'

export function NotificationInbox({
  items = DEFAULT_ITEMS,
  emptyMessage = 'Nothing unread. You are caught up.',
  onMarkAllRead,
  className = '',
}: NotificationInboxProps) {
  const [read, setRead] = React.useState<Set<string>>(
    () => new Set(items.filter((i) => i.read).map((i) => i.id)),
  )
  const [filter, setFilter] = React.useState<Filter>('all')
  const [announcement, setAnnouncement] = React.useState('')

  const unreadCount = items.filter((i) => !read.has(i.id)).length
  const shown = filter === 'unread' ? items.filter((i) => !read.has(i.id)) : items

  function markAllRead() {
    setRead(new Set(items.map((i) => i.id)))
    setAnnouncement('All notifications marked as read.')
    onMarkAllRead?.()
  }

  function toggleRead(id: string) {
    setRead((prev) => {
      const next = new Set(prev)
      if (next.has(id)) next.delete(id)
      else next.add(id)
      return next
    })
  }

  return (
    <div className={`mx-auto w-full max-w-md ${className}`}>
      <div className="overflow-hidden rounded-2xl border border-border/60 bg-card/60 shadow-lg">
        {/* -- Header -------------------------------------------------- */}
        <div className="flex items-center justify-between gap-3 border-b border-border/60 px-4 py-3">
          <h2 className="flex items-center gap-2 text-sm font-semibold">
            <Bell aria-hidden className="h-4 w-4" />
            Notifications
            {/* The count is in the text, not only in the badge. */}
            <span className="sr-only">, {unreadCount} unread</span>
            {unreadCount > 0 ? (
              <span
                aria-hidden
                className="rounded-full bg-primary px-1.5 py-0.5 text-[10px] font-bold text-primary-foreground"
              >
                {unreadCount}
              </span>
            ) : null}
          </h2>

          <button
            type="button"
            onClick={markAllRead}
            disabled={unreadCount === 0}
            className="inline-flex items-center gap-1 rounded-lg px-2 py-1 text-xs font-semibold text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40"
          >
            <CheckCheck aria-hidden className="h-3.5 w-3.5" />
            Mark all read
          </button>
        </div>

        {/* -- Filter: one radio group, not three loose buttons -------- */}
        <fieldset className="border-b border-border/60 px-4 py-2.5">
          <legend className="sr-only">Filter notifications</legend>
          <div className="inline-flex rounded-lg border border-border/60 p-0.5">
            {(['all', 'unread'] as const).map((value) => (
              <label
                key={value}
                className={`cursor-pointer rounded-md px-3 py-1 text-xs font-semibold capitalize transition-colors has-focus-visible:ring-2 has-focus-visible:ring-ring ${
                  filter === value ? 'bg-primary text-primary-foreground' : 'text-muted-foreground'
                }`}
              >
                <input
                  type="radio"
                  name="notification-filter"
                  value={value}
                  checked={filter === value}
                  onChange={() => setFilter(value)}
                  className="sr-only"
                />
                {value}
                {value === 'unread' ? ` (${unreadCount})` : ''}
              </label>
            ))}
          </div>
        </fieldset>

        {/* -- List ---------------------------------------------------- */}
        {shown.length === 0 ? (
          <p className="px-4 py-12 text-center text-sm text-muted-foreground">{emptyMessage}</p>
        ) : (
          <ul className="max-h-96 divide-y divide-border/60 overflow-y-auto">
            {shown.map((item) => {
              const Icon = KIND_ICON[item.kind]
              const isUnread = !read.has(item.id)
              return (
                <li key={item.id} className={isUnread ? 'bg-primary/[0.04]' : undefined}>
                  <div className="flex gap-3 px-4 py-3">
                    <span className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-border/60 bg-background text-muted-foreground">
                      <Icon aria-hidden className="h-4 w-4" />
                    </span>

                    <div className="min-w-0 flex-1">
                      <p className="text-sm leading-snug">
                        <span className="font-semibold">{item.actor}</span>{' '}
                        <span className="text-muted-foreground">{item.text}</span>
                      </p>
                      <time dateTime={item.at} className="mt-0.5 block text-xs text-muted-foreground">
                        {item.ago}
                      </time>
                    </div>

                    <button
                      type="button"
                      onClick={() => toggleRead(item.id)}
                      className="mt-1 flex h-6 w-6 shrink-0 items-center justify-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                    >
                      {/* Dot plus text — never colour alone. */}
                      <span
                        aria-hidden
                        className={`h-2 w-2 rounded-full ${
                          isUnread ? 'bg-primary' : 'border border-border'
                        }`}
                      />
                      <span className="sr-only">
                        {isUnread ? 'Unread — mark as read' : 'Read — mark as unread'}
                      </span>
                    </button>
                  </div>
                </li>
              )
            })}
          </ul>
        )}
      </div>

      {/* Bulk actions have no visible feedback beyond dots vanishing. */}
      <p aria-live="polite" className="sr-only">
        {announcement}
      </p>
    </div>
  )
}

Before you paste

Styling is Tailwind utility classes on semantic tokens (bg-card, text-muted-foreground) — it inherits your theme instead of overriding it.
Install: npm i lucide-react
Every prop has a default, so it renders standalone before you wire it up.

Where it goes

Drop it at components/notification-inbox.tsx and import it where you need the section:

import { NotificationInbox } from '@/components/notification-inbox'

Customize

1 of this block’s props are simple enough to drive from here. Change them and the block below re-renders — it is the same component whose source is above, not a mock of it. Everything else it accepts is in the table underneath.

Props

Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.

Prop	Type	Default
`items`	`NotificationItem[]`	`DEFAULT_ITEMS`
`emptyMessage`	`string`	`'Nothing unread. You are caught up.'`
`onMarkAllRead`	`() => void`	—
`className`	`string`	`''`

Not using React?

The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.

This block is interactive. The markup below is its initial state with the event handlers stripped — you will need to re-wire the behaviour in your framework.

notification-inbox.html

<!--
  Notification Inbox Panel — markup from the Hoverlab catalog.

  This is the block rendered once to HTML and wrapped as a component
  file. It is not a port of the React source: the Tailwind classes carry
  the design, which is the part that took the work, and they are the same
  in every framework.

  This block is interactive in React and the handlers are NOT here.
  Buttons, toggles and menus render in their initial state and do
  nothing until you wire them up.
-->
<div class="mx-auto w-full max-w-md ">
  <div class="overflow-hidden rounded-2xl border border-border/60 bg-card/60 shadow-lg">
    <div class="flex items-center justify-between gap-3 border-b border-border/60 px-4 py-3">
      <h2 class="flex items-center gap-2 text-sm font-semibold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bell h-4 w-4" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"></path><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"></path></svg>Notifications<span class="sr-only">, 3 unread</span><span aria-hidden="true" class="rounded-full bg-primary px-1.5 py-0.5 text-[10px] font-bold text-primary-foreground">3</span></h2>
      <button type="button" class="inline-flex items-center gap-1 rounded-lg px-2 py-1 text-xs font-semibold text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-check h-3.5 w-3.5" aria-hidden="true"><path d="M18 6 7 17l-5-5"></path><path d="m22 10-7.5 7.5L13 16"></path></svg>Mark all read</button>
    </div>
    <fieldset class="border-b border-border/60 px-4 py-2.5">
      <legend class="sr-only">Filter notifications</legend>
      <div class="inline-flex rounded-lg border border-border/60 p-0.5">
        <label class="cursor-pointer rounded-md px-3 py-1 text-xs font-semibold capitalize transition-colors has-focus-visible:ring-2 has-focus-visible:ring-ring bg-primary text-primary-foreground"><input type="radio" class="sr-only" name="notification-filter" checked="" value="all" />all</label>
        <label class="cursor-pointer rounded-md px-3 py-1 text-xs font-semibold capitalize transition-colors has-focus-visible:ring-2 has-focus-visible:ring-ring text-muted-foreground"><input type="radio" class="sr-only" name="notification-filter" value="unread" />unread (3)</label>
      </div>
    </fieldset>
    <ul class="max-h-96 divide-y divide-border/60 overflow-y-auto">
      <li class="bg-primary/[0.04]">
        <div class="flex gap-3 px-4 py-3">
          <span class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-border/60 bg-background text-muted-foreground">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-square h-4 w-4" aria-hidden="true">
              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
            </svg>
          </span>
          <div class="min-w-0 flex-1">
            <p class="text-sm leading-snug">
              <span class="font-semibold">Ada Lovelace</span>
              <span class="text-muted-foreground">mentioned you in “Q3 roadmap”</span>
            </p>
            <time dateTime="2026-08-08T09:12:00Z" class="mt-0.5 block text-xs text-muted-foreground">18m ago</time>
          </div>
          <button type="button" class="mt-1 flex h-6 w-6 shrink-0 items-center justify-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
            <span aria-hidden="true" class="h-2 w-2 rounded-full bg-primary"></span>
            <span class="sr-only">Unread — mark as read</span>
          </button>
        </div>
      </li>
      <li class="bg-primary/[0.04]">
        <div class="flex gap-3 px-4 py-3">
          <span class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-border/60 bg-background text-muted-foreground">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-git-pull-request h-4 w-4" aria-hidden="true">
              <circle cx="18" cy="18" r="3"></circle>
              <circle cx="6" cy="6" r="3"></circle>
              <path d="M13 6h3a2 2 0 0 1 2 2v7"></path>
              <line x1="6" x2="6" y1="9" y2="21"></line>
            </svg>
          </span>
          <div class="min-w-0 flex-1">
            <p class="text-sm leading-snug">
              <span class="font-semibold">Grace Hopper</span>
              <span class="text-muted-foreground">requested your review on #482</span>
            </p>
            <time dateTime="2026-08-08T07:40:00Z" class="mt-0.5 block text-xs text-muted-foreground">2h ago</time>
          </div>
          <button type="button" class="mt-1 flex h-6 w-6 shrink-0 items-center justify-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
            <span aria-hidden="true" class="h-2 w-2 rounded-full bg-primary"></span>
            <span class="sr-only">Unread — mark as read</span>
          </button>
        </div>
      </li>
      <li class="bg-primary/[0.04]">
        <div class="flex gap-3 px-4 py-3">
          <span class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-border/60 bg-background text-muted-foreground">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert h-4 w-4" aria-hidden="true">
              <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path>
              <path d="M12 9v4"></path>
              <path d="M12 17h.01"></path>
            </svg>
          </span>
          <div class="min-w-0 flex-1">
            <p class="text-sm leading-snug">
              <span class="font-semibold">System</span>
              <span class="text-muted-foreground">Usage reached 80% of your monthly quota</span>
            </p>
            <time dateTime="2026-08-07T22:05:00Z" class="mt-0.5 block text-xs text-muted-foreground">11h ago</time>
          </div>
          <button type="button" class="mt-1 flex h-6 w-6 shrink-0 items-center justify-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
            <span aria-hidden="true" class="h-2 w-2 rounded-full bg-primary"></span>
            <span class="sr-only">Unread — mark as read</span>
          </button>
        </div>
      </li>
      <li>
        <div class="flex gap-3 px-4 py-3">
          <span class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-border/60 bg-background text-muted-foreground">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user-plus h-4 w-4" aria-hidden="true">
              <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
              <circle cx="9" cy="7" r="4"></circle>
              <line x1="19" x2="19" y1="8" y2="14"></line>
              <line x1="22" x2="16" y1="11" y2="11"></line>
            </svg>
          </span>
          <div class="min-w-0 flex-1">
            <p class="text-sm leading-snug">
              <span class="font-semibold">Alan Turing</span>
              <span class="text-muted-foreground">invited you to the Platform team</span>
            </p>
            <time dateTime="2026-08-07T15:30:00Z" class="mt-0.5 block text-xs text-muted-foreground">18h ago</time>
          </div>
          <button type="button" class="mt-1 flex h-6 w-6 shrink-0 items-center justify-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
            <span aria-hidden="true" class="h-2 w-2 rounded-full border border-border"></span>
            <span class="sr-only">Read — mark as unread</span>
          </button>
        </div>
      </li>
      <li>
        <div class="flex gap-3 px-4 py-3">
          <span class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-border/60 bg-background text-muted-foreground">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-square h-4 w-4" aria-hidden="true">
              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
            </svg>
          </span>
          <div class="min-w-0 flex-1">
            <p class="text-sm leading-snug">
              <span class="font-semibold">Katherine Johnson</span>
              <span class="text-muted-foreground">replied to your comment on #470</span>
            </p>
            <time dateTime="2026-08-06T11:02:00Z" class="mt-0.5 block text-xs text-muted-foreground">2d ago</time>
          </div>
          <button type="button" class="mt-1 flex h-6 w-6 shrink-0 items-center justify-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
            <span aria-hidden="true" class="h-2 w-2 rounded-full border border-border"></span>
            <span class="sr-only">Read — mark as unread</span>
          </button>
        </div>
      </li>
    </ul>
  </div>
  <p aria-live="polite" class="sr-only"></p>
</div>

This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
It is one frame: the component in its initial state, with no props applied beyond the defaults.
This block is interactive in React — toggles, menus or form state. None of that survives here; the markup is the closed/default state and the handlers are gone. Re-wire them in your own framework.
Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.

What each framework gets across the whole catalog — effects convert properly; this rung is markup.

For AI

The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.

See the prompt

Used in these pages

Notification Settings5 blocks

Want the whole screen instead of this one section? Open a page and copy it entire.

6 more blocks in Notifications

All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.

Browse Notifications

Shipping one commercially

Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.

A commercial licence for everything in the catalog
Unlimited bundle exports, in Vue, Svelte and Tailwind
One payment — no subscription, nothing to renew

Pro — $79 once

More Notifications blocks

View category

Toast Notification Stack

A corner stack whose live region is mounted before any message exists, errors announce assertively, and the auto-dismiss timer pauses on hover and on focus.

Notifications171 lines1 dep11 Sept

Notifications

Choose how you hear about each kind of event. Changes save as you make them.

Notification channels by event type. Each cell is a switch.
Event	Email	Push	In-app
Mentions & repliesSomeone @-mentions you or replies to your comment.
AssignmentsWork is assigned to you or reassigned away from you.
Weekly digestA Monday summary of what moved last week.
BillingReceipts, upcoming charges, and failed payments.A failed payment has to reach you somewhere you will see it.
SecurityNew sign-ins, password changes, and API key creation.Security alerts cannot be switched off.

Notification Preferences Matrix

Per-event, per-channel switches as a real table, with required notifications locked and explained, and column headers that toggle a whole channel and report a mixed state honestly.

Notifications284 lines1 dep11 Sept

Push Permission Pre-Prompt

The soft ask before the browser dialog you only get one shot at — what will be sent, what will not, and a decline of the same weight as the yes.

Notifications222 lines1 dep

Yesterday, in one message

The alternative is fourteen separate emails, which is how a notification system trains people to filter it into a folder they never open.

Notification Digest

A day's notifications collapsed into one digest, grouped by what they are rather than when they arrived.

Notifications152 linesNo deps10 Sept

Digest Schedule Form

The control that turns notification volume down instead of off, which is the choice most people actually want.

Notifications175 linesNo deps

Where each thing goes

The all-or-nothing toggle is why people mute products. Routing by event lets the two that matter stay loud while the rest go somewhere quiet.

Notification Channel List

Which channel carries which event, so the loud ones can be moved rather than muted entirely.

Notifications142 linesNo deps13 Sept

Notification Inbox Panel

What's included

Works with

License

Preview

Notifications, 3 unread

Source

Before you paste

Where it goes

Customize

Props

Not using React?

For AI

Used in these pages

6 more blocks in Notifications

Shipping one commercially

More Notifications blocks

Toast notifications

Toast Notification Stack

Notifications

Notification Preferences Matrix

Want to know when this finishes?

Push Permission Pre-Prompt

Yesterday, in one message

Notification Digest

Send it all at once instead

Digest Schedule Form

Where each thing goes

Notification Channel List

What's included

Works with

License

Preview

Notifications, 3 unread3

Source

Before you paste

Where it goes

Customize

Props

Not using React?

For AI

Used in these pages

6 more blocks in Notifications

Shipping one commercially

More Notifications blocks

Toast Notification Stack

Notification Preferences Matrix

Push Permission Pre-Prompt

Notification Digest

Digest Schedule Form

Notification Channel List

Notifications, 3 unread