Product block

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.

284 lineslucide-reactAdded 24 Aug 2026Updated 11 Sept 2026

notifications
preferences
settings
email
push

What's included

components/notification-preferences.tsx
Needs lucide-react

Works with

React
Next.js
Tailwind CSS
TypeScript

npx hoverlab add notification-preferences

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

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.

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

Source

components/notification-preferences.tsx

'use client'

/**
 * <NotificationPreferences> — the per-event, per-channel matrix.
 *
 * Every product grows this screen and most build it as a flat list of
 * switches, which cannot express the thing users actually want: "tell me
 * about billing by email, mentions by push, and nothing at all in my inbox
 * digest". A matrix is the honest shape, and the honest shape is a table.
 *
 * It IS a `<table>`, not a grid of divs. The relationship between a row and
 * a column is the entire content of this screen, and a table is the only
 * markup that carries it — a screen reader on a real table announces
 * "Mentions, Push, checked" from the header cells, where a div grid
 * announces "checkbox, checked" thirty times.
 *
 * Two rules encoded, both learned from products that got them wrong:
 *
 *  - Some notifications cannot be turned off, and the row says so rather
 *    than silently re-enabling itself on save. Security alerts and billing
 *    failures are the usual set. A disabled switch with a reason beats a
 *    switch that does not stick.
 *
 *  - Turning a whole channel off is one action, not fourteen. The column
 *    header is a control, and it reflects a mixed column as indeterminate
 *    rather than guessing at on or off.
 */

import * as React from 'react'
import { Mail, Smartphone, Bell, Lock } from 'lucide-react'

export type ChannelId = 'email' | 'push' | 'inApp'

export interface NotificationEvent {
  id: string
  label: string
  description: string
  /** Channels that cannot be switched off, and why. */
  required?: { channels: ChannelId[]; reason: string }
}

export type Preferences = Record<string, Record<ChannelId, boolean>>

export interface NotificationPreferencesProps {
  events?: NotificationEvent[]
  value?: Preferences
  onChange?: (next: Preferences) => void
  className?: string
}

const CHANNELS: { id: ChannelId; label: string; icon: React.ReactNode }[] = [
  { id: 'email', label: 'Email', icon: <Mail className="h-3.5 w-3.5" /> },
  { id: 'push', label: 'Push', icon: <Smartphone className="h-3.5 w-3.5" /> },
  { id: 'inApp', label: 'In-app', icon: <Bell className="h-3.5 w-3.5" /> },
]

const DEFAULT_EVENTS: NotificationEvent[] = [
  {
    id: 'mentions',
    label: 'Mentions & replies',
    description: 'Someone @-mentions you or replies to your comment.',
  },
  {
    id: 'assignments',
    label: 'Assignments',
    description: 'Work is assigned to you or reassigned away from you.',
  },
  {
    id: 'digest',
    label: 'Weekly digest',
    description: 'A Monday summary of what moved last week.',
  },
  {
    id: 'billing',
    label: 'Billing',
    description: 'Receipts, upcoming charges, and failed payments.',
    required: {
      channels: ['email'],
      reason: 'A failed payment has to reach you somewhere you will see it.',
    },
  },
  {
    id: 'security',
    label: 'Security',
    description: 'New sign-ins, password changes, and API key creation.',
    required: {
      channels: ['email'],
      reason: 'Security alerts cannot be switched off.',
    },
  },
]

function defaultPreferences(events: NotificationEvent[]): Preferences {
  const out: Preferences = {}
  for (const event of events) {
    out[event.id] = {
      email: true,
      push: event.id === 'mentions' || event.id === 'assignments',
      inApp: event.id !== 'digest',
    }
  }
  return out
}

function isRequired(event: NotificationEvent, channel: ChannelId): boolean {
  return Boolean(event.required?.channels.includes(channel))
}

export function NotificationPreferences({
  events = DEFAULT_EVENTS,
  value,
  onChange,
  className,
}: NotificationPreferencesProps) {
  /*
    Per-instance prefix for every id this block emits.

    The literals these replaced were a latent duplicate the moment the
    block appeared twice on one document, and `aria-labelledby` on a
    duplicated id resolves to the first match -- so the second copy was
    labelled by the first copy's heading. Client component, so `useId` is
    the right tool.
  */
  const uid = React.useId()

  // Uncontrolled by default, controlled when `value` is supplied — the same
  // contract as a native input, so this drops into a form without the
  // caller having to own state it does not care about.
  const [internal, setInternal] = React.useState<Preferences>(() =>
    defaultPreferences(events),
  )
  const prefs = value ?? internal

  const commit = (next: Preferences) => {
    if (value === undefined) setInternal(next)
    onChange?.(next)
  }

  const toggle = (eventId: string, channel: ChannelId) => {
    const event = events.find((e) => e.id === eventId)
    if (event && isRequired(event, channel)) return
    commit({
      ...prefs,
      [eventId]: { ...prefs[eventId]!, [channel]: !prefs[eventId]![channel] },
    })
  }

  /**
   * A column is on when every switchable row in it is on.
   *
   * Required rows are excluded from the calculation rather than counted as
   * "on". Counting them means a column of one required row and nine off
   * rows can never read as fully off, so the header control would look
   * broken to the person clicking it.
   */
  const columnState = (channel: ChannelId): 'on' | 'off' | 'mixed' => {
    const switchable = events.filter((e) => !isRequired(e, channel))
    if (!switchable.length) return 'on'
    const on = switchable.filter((e) => prefs[e.id]?.[channel]).length
    if (on === 0) return 'off'
    return on === switchable.length ? 'on' : 'mixed'
  }

  const setColumn = (channel: ChannelId, on: boolean) => {
    const next: Preferences = { ...prefs }
    for (const event of events) {
      if (isRequired(event, channel)) continue
      next[event.id] = { ...next[event.id]!, [channel]: on }
    }
    commit(next)
  }

  return (
    <section
      className={`w-full rounded-2xl border border-border/60 bg-card ${className ?? ''}`}
      aria-labelledby={`${uid}-notif-heading`}
    >
      <header className="border-b border-border/60 px-6 py-4">
        <h2 id={`${uid}-notif-heading`} className="text-base font-semibold tracking-tight">
          Notifications
        </h2>
        <p className="mt-0.5 text-sm text-muted-foreground">
          Choose how you hear about each kind of event. Changes save as you
          make them.
        </p>
      </header>

      <div className="overflow-x-auto">
        <table className="w-full min-w-[34rem] border-collapse text-start">
          <caption className="sr-only">
            Notification channels by event type. Each cell is a switch.
          </caption>
          <thead>
            <tr className="border-b border-border/60">
              <th scope="col" className="px-6 py-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                Event
              </th>
              {CHANNELS.map((channel) => {
                const state = columnState(channel.id)
                return (
                  <th key={channel.id} scope="col" className="px-4 py-3 text-center">
                    <span className="flex flex-col items-center gap-1.5">
                      <span className="inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                        <span aria-hidden>{channel.icon}</span>
                        {channel.label}
                      </span>
                      {/*
                        The column control. `aria-checked="mixed"` is what
                        makes a partially-on column announce as mixed rather
                        than as a lie in one direction — the reason this is a
                        button with a role rather than an <input>, which has
                        no mixed state that survives a click.
                      */}
                      <button
                        type="button"
                        role="checkbox"
                        aria-checked={state === 'mixed' ? 'mixed' : state === 'on'}
                        aria-label={`All ${channel.label.toLowerCase()} notifications`}
                        onClick={() => setColumn(channel.id, state !== 'on')}
                        className="text-[11px] font-medium text-primary hover:underline"
                      >
                        {state === 'on' ? 'Turn all off' : 'Turn all on'}
                      </button>
                    </span>
                  </th>
                )
              })}
            </tr>
          </thead>

          <tbody className="divide-y divide-border/60">
            {events.map((event) => (
              <tr key={event.id}>
                <th scope="row" className="px-6 py-4 font-normal">
                  <span className="block text-sm font-medium">{event.label}</span>
                  <span className="mt-0.5 block max-w-sm text-xs text-muted-foreground">
                    {event.description}
                  </span>
                  {event.required ? (
                    <span className="mt-1 inline-flex items-center gap-1 text-xs text-muted-foreground">
                      <Lock aria-hidden className="h-3 w-3" />
                      {event.required.reason}
                    </span>
                  ) : null}
                </th>

                {CHANNELS.map((channel) => {
                  const locked = isRequired(event, channel.id)
                  const on = Boolean(prefs[event.id]?.[channel.id])
                  return (
                    <td key={channel.id} className="px-4 py-4 text-center">
                      <button
                        type="button"
                        role="switch"
                        aria-checked={on}
                        disabled={locked}
                        onClick={() => toggle(event.id, channel.id)}
                        aria-label={`${event.label} by ${channel.label}`}
                        title={locked ? event.required?.reason : undefined}
                        className={`relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${
                          on ? 'bg-primary' : 'bg-muted'
                        }`}
                      >
                        <span
                          aria-hidden
                          className={`pointer-events-none block h-5 w-5 rounded-full border border-transparent bg-background shadow-sm motion-safe:transition-transform ${
                            on
                              ? 'translate-x-[1.375rem] rtl:-translate-x-[1.375rem]'
                              : 'translate-x-0.5 rtl:-translate-x-0.5'
                          }`}
                        />
                      </button>
                    </td>
                  )
                })}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  )
}

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-preferences.tsx and import it where you need the section:

import { NotificationPreferences } from '@/components/notification-preferences'

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
`events`	`NotificationEvent[]`	`DEFAULT_EVENTS`
`value`	`Preferences`	—
`onChange`	`(next: Preferences) => 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-preferences.html

<!--
  Notification Preferences Matrix — 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.
-->
<section class="w-full rounded-2xl border border-border/60 bg-card " aria-labelledby="_R_0_-notif-heading">
  <header class="border-b border-border/60 px-6 py-4">
    <h2 id="_R_0_-notif-heading" class="text-base font-semibold tracking-tight">Notifications</h2>
    <p class="mt-0.5 text-sm text-muted-foreground">Choose how you hear about each kind of event. Changes save as you make them.</p>
  </header>
  <div class="overflow-x-auto">
    <table class="w-full min-w-[34rem] border-collapse text-start">
      <caption class="sr-only">Notification channels by event type. Each cell is a switch.</caption>
      <thead>
        <tr class="border-b border-border/60">
          <th scope="col" class="px-6 py-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground">Event</th>
          <th scope="col" class="px-4 py-3 text-center">
            <span class="flex flex-col items-center gap-1.5">
              <span class="inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground"><span aria-hidden="true"><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-mail h-3.5 w-3.5" aria-hidden="true"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path><rect x="2" y="4" width="20" height="16" rx="2"></rect></svg></span>Email</span>
              <button type="button" role="checkbox" aria-checked="true" aria-label="All email notifications" class="text-[11px] font-medium text-primary hover:underline">Turn all off</button>
            </span>
          </th>
          <th scope="col" class="px-4 py-3 text-center">
            <span class="flex flex-col items-center gap-1.5">
              <span class="inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground"><span aria-hidden="true"><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-smartphone h-3.5 w-3.5" aria-hidden="true"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"></rect><path d="M12 18h.01"></path></svg></span>Push</span>
              <button type="button" role="checkbox" aria-checked="mixed" aria-label="All push notifications" class="text-[11px] font-medium text-primary hover:underline">Turn all on</button>
            </span>
          </th>
          <th scope="col" class="px-4 py-3 text-center">
            <span class="flex flex-col items-center gap-1.5">
              <span class="inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground"><span aria-hidden="true"><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-3.5 w-3.5" 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></span>In-app</span>
              <button type="button" role="checkbox" aria-checked="mixed" aria-label="All in-app notifications" class="text-[11px] font-medium text-primary hover:underline">Turn all on</button>
            </span>
          </th>
        </tr>
      </thead>
      <tbody class="divide-y divide-border/60">
        <tr>
          <th scope="row" class="px-6 py-4 font-normal">
            <span class="block text-sm font-medium">Mentions &amp; replies</span>
            <span class="mt-0.5 block max-w-sm text-xs text-muted-foreground">Someone @-mentions you or replies to your comment.</span>
          </th>
          <td class="px-4 py-4 text-center">
            <button type="button" role="switch" aria-checked="true" aria-label="Mentions &amp;amp; replies by Email" class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 bg-primary">
              <span aria-hidden="true" class="pointer-events-none block h-5 w-5 rounded-full border border-transparent bg-background shadow-sm motion-safe:transition-transform translate-x-[1.375rem] rtl:-translate-x-[1.375rem]"></span>
            </button>
          </td>
          <td class="px-4 py-4 text-center">
            <button type="button" role="switch" aria-checked="true" aria-label="Mentions &amp;amp; replies by Push" class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 bg-primary">
              <span aria-hidden="true" class="pointer-events-none block h-5 w-5 rounded-full border border-transparent bg-background shadow-sm motion-safe:transition-transform translate-x-[1.375rem] rtl:-translate-x-[1.375rem]"></span>
            </button>
          </td>
          <td class="px-4 py-4 text-center">
            <button type="button" role="switch" aria-checked="true" aria-label="Mentions &amp;amp; replies by In-app" class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 bg-primary">
              <span aria-hidden="true" class="pointer-events-none block h-5 w-5 rounded-full border border-transparent bg-background shadow-sm motion-safe:transition-transform translate-x-[1.375rem] rtl:-translate-x-[1.375rem]"></span>
            </button>
          </td>
        </tr>
        <tr>
          <th scope="row" class="px-6 py-4 font-normal">
            <span class="block text-sm font-medium">Assignments</span>
            <span class="mt-0.5 block max-w-sm text-xs text-muted-foreground">Work is assigned to you or reassigned away from you.</span>
          </th>
          <td class="px-4 py-4 text-center">
            <button type="button" role="switch" aria-checked="true" aria-label="Assignments by Email" class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 bg-primary">
              <span aria-hidden="true" class="pointer-events-none block h-5 w-5 rounded-full border border-transparent bg-background shadow-sm motion-safe:transition-transform translate-x-[1.375rem] rtl:-translate-x-[1.375rem]"></span>
            </button>
          </td>
          <td class="px-4 py-4 text-center">
            <button type="button" role="switch" aria-checked="true" aria-label="Assignments by Push" class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 bg-primary">
              <span aria-hidden="true" class="pointer-events-none block h-5 w-5 rounded-full border border-transparent bg-background shadow-sm motion-safe:transition-transform translate-x-[1.375rem] rtl:-translate-x-[1.375rem]"></span>
            </button>
          </td>
          <td class="px-4 py-4 text-center">
            <button type="button" role="switch" aria-checked="true" aria-label="Assignments by In-app" class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 bg-primary">
              <span aria-hidden="true" class="pointer-events-none block h-5 w-5 rounded-full border border-transparent bg-background shadow-sm motion-safe:transition-transform translate-x-[1.375rem] rtl:-translate-x-[1.375rem]"></span>
            </button>
          </td>
        </tr>
        <tr>
          <th scope="row" class="px-6 py-4 font-normal">
            <span class="block text-sm font-medium">Weekly digest</span>
            <span class="mt-0.5 block max-w-sm text-xs text-muted-foreground">A Monday summary of what moved last week.</span>
          </th>
          <td class="px-4 py-4 text-center">
            <button type="button" role="switch" aria-checked="true" aria-label="Weekly digest by Email" class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 bg-primary">
              <span aria-hidden="true" class="pointer-events-none block h-5 w-5 rounded-full border border-transparent bg-background shadow-sm motion-safe:transition-transform translate-x-[1.375rem] rtl:-translate-x-[1.375rem]"></span>
            </button>
          </td>
          <td class="px-4 py-4 text-center">
            <button type="button" role="switch" aria-checked="false" aria-label="Weekly digest by Push" class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 bg-muted">
              <span aria-hidden="true" class="pointer-events-none block h-5 w-5 rounded-full border border-transparent bg-background shadow-sm motion-safe:transition-transform translate-x-0.5 rtl:-translate-x-0.5"></span>
            </button>
          </td>
          <td class="px-4 py-4 text-center">
            <button type="button" role="switch" aria-checked="false" aria-label="Weekly digest by In-app" class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 bg-muted">
              <span aria-hidden="true" class="pointer-events-none block h-5 w-5 rounded-full border border-transparent bg-background shadow-sm motion-safe:transition-transform translate-x-0.5 rtl:-translate-x-0.5"></span>
            </button>
          </td>
        </tr>
        <tr>
          <th scope="row" class="px-6 py-4 font-normal">
            <span class="block text-sm font-medium">Billing</span>
            <span class="mt-0.5 block max-w-sm text-xs text-muted-foreground">Receipts, upcoming charges, and failed payments.</span>
            <span class="mt-1 inline-flex items-center gap-1 text-xs 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-lock h-3 w-3" aria-hidden="true"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>A failed payment has to reach you somewhere you will see it.</span>
          </th>
          <td class="px-4 py-4 text-center">
            <button type="button" role="switch" aria-checked="true" disabled="" aria-label="Billing by Email" title="A failed payment has to reach you somewhere you will see it." class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 bg-primary">
              <span aria-hidden="true" class="pointer-events-none block h-5 w-5 rounded-full border border-transparent bg-background shadow-sm motion-safe:transition-transform translate-x-[1.375rem] rtl:-translate-x-[1.375rem]"></span>
            </button>
          </td>
          <td class="px-4 py-4 text-center">
            <button type="button" role="switch" aria-checked="false" aria-label="Billing by Push" class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 bg-muted">
              <span aria-hidden="true" class="pointer-events-none block h-5 w-5 rounded-full border border-transparent bg-background shadow-sm motion-safe:transition-transform translate-x-0.5 rtl:-translate-x-0.5"></span>
            </button>
          </td>
          <td class="px-4 py-4 text-center">
            <button type="button" role="switch" aria-checked="true" aria-label="Billing by In-app" class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 bg-primary">
              <span aria-hidden="true" class="pointer-events-none block h-5 w-5 rounded-full border border-transparent bg-background shadow-sm motion-safe:transition-transform translate-x-[1.375rem] rtl:-translate-x-[1.375rem]"></span>
            </button>
          </td>
        </tr>
        <tr>
          <th scope="row" class="px-6 py-4 font-normal">
            <span class="block text-sm font-medium">Security</span>
            <span class="mt-0.5 block max-w-sm text-xs text-muted-foreground">New sign-ins, password changes, and API key creation.</span>
            <span class="mt-1 inline-flex items-center gap-1 text-xs 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-lock h-3 w-3" aria-hidden="true"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>Security alerts cannot be switched off.</span>
          </th>
          <td class="px-4 py-4 text-center">
            <button type="button" role="switch" aria-checked="true" disabled="" aria-label="Security by Email" title="Security alerts cannot be switched off." class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 bg-primary">
              <span aria-hidden="true" class="pointer-events-none block h-5 w-5 rounded-full border border-transparent bg-background shadow-sm motion-safe:transition-transform translate-x-[1.375rem] rtl:-translate-x-[1.375rem]"></span>
            </button>
          </td>
          <td class="px-4 py-4 text-center">
            <button type="button" role="switch" aria-checked="false" aria-label="Security by Push" class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 bg-muted">
              <span aria-hidden="true" class="pointer-events-none block h-5 w-5 rounded-full border border-transparent bg-background shadow-sm motion-safe:transition-transform translate-x-0.5 rtl:-translate-x-0.5"></span>
            </button>
          </td>
          <td class="px-4 py-4 text-center">
            <button type="button" role="switch" aria-checked="true" aria-label="Security by In-app" class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 bg-primary">
              <span aria-hidden="true" class="pointer-events-none block h-5 w-5 rounded-full border border-transparent bg-background shadow-sm motion-safe:transition-transform translate-x-[1.375rem] rtl:-translate-x-[1.375rem]"></span>
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

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, 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

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.

Notifications255 lines1 dep10 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