Grouped Settings Layout
Sidebar-and-panel settings shell that becomes a horizontal scroller on mobile instead of collapsing into a select.
Notification Channel Matrix
Every event against every delivery channel in one grid, with column toggles and required rows that show the policy instead of a disabled checkbox.
221 lineslucide-reactAdded 31 Aug 2026Updated 10 Sept 2026
- settings
- notifications
- preferences
- matrix
- channels
What's included
components/settings-notification-matrix.tsx- Needs lucide-react
Works with
- React
- Next.js
- Tailwind CSS
- TypeScript
npx hoverlab add settings-notification-matrix
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
Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.
Source
components/settings-notification-matrix.tsx
'use client'
/**
* <SettingsNotificationMatrix> — every event against every channel, in one
* grid.
*
* The catalog has a notification *preferences* block already, and it is the
* common shape: a list of events with a toggle each. That shape stops
* working the moment there is more than one delivery channel, because the
* question stops being "do I want this" and becomes "where do I want this" —
* and a list of toggles cannot express "email me about billing, Slack me
* about incidents, and never push either".
*
* WHY A MATRIX AND NOT THREE LISTS
*
* Three tabs of toggles hides the comparison that people are actually
* making. The whole reason to open this screen is to see, at a glance, that
* everything is going to email and nothing is going to Slack. A grid shows
* that in one look; tabs require remembering the previous tab.
*
* THE COLUMN THAT IS NOT A CHANNEL
*
* "Required" rows exist in every real product — password resets, receipts,
* security notices — and are the single most common source of a broken
* preferences screen, because a toggle rendered for something that cannot
* be turned off is a lie. Those rows render a lock and a reason instead of
* a disabled checkbox, which is the honest version of the same fact.
*
* ACCESSIBILITY: a real `<table>` with `<th>` on both axes, so each
* checkbox is announced with its row and column rather than as one of
* eighteen anonymous checkboxes. The column toggles are buttons that report
* how many rows they will affect, and the whole grid is one `<fieldset>`
* with a legend rather than a bare div.
*/
import * as React from 'react'
import { Bell, Lock, Mail, MessageSquare } from 'lucide-react'
export type NotificationChannel = 'email' | 'slack' | 'push'
export interface NotificationEvent {
id: string
label: string
description: string
/** Cannot be disabled, with the reason shown in place of the controls. */
required?: boolean
requiredReason?: string
channels: Record<NotificationChannel, boolean>
}
export interface SettingsNotificationMatrixProps {
events?: NotificationEvent[]
className?: string
}
const CHANNELS: { id: NotificationChannel; label: string; Icon: typeof Mail }[] = [
{ id: 'email', label: 'Email', Icon: Mail },
{ id: 'slack', label: 'Slack', Icon: MessageSquare },
{ id: 'push', label: 'Push', Icon: Bell },
]
const DEFAULT_EVENTS: NotificationEvent[] = [
{
id: 'security',
label: 'Security alerts',
description: 'New sign-ins, password changes, recovery codes used.',
required: true,
requiredReason: 'Always sent by email — a security notice you can turn off is not one.',
channels: { email: true, slack: false, push: true },
},
{
id: 'billing',
label: 'Billing and receipts',
description: 'Invoices, failed payments, plan changes.',
required: true,
requiredReason: 'Receipts are sent by email for tax and dispute records.',
channels: { email: true, slack: false, push: false },
},
{
id: 'incidents',
label: 'Incidents',
description: 'An alert rule fired, or a service is degraded.',
channels: { email: false, slack: true, push: true },
},
{
id: 'mentions',
label: 'Mentions and replies',
description: 'Someone named you in a comment or thread.',
channels: { email: true, slack: true, push: false },
},
{
id: 'weekly',
label: 'Weekly summary',
description: 'One digest of the week, sent Monday morning.',
channels: { email: true, slack: false, push: false },
},
{
id: 'product',
label: 'Product updates',
description: 'New features and changelog highlights.',
channels: { email: false, slack: false, push: false },
},
]
export function SettingsNotificationMatrix({
events = DEFAULT_EVENTS,
className = '',
}: SettingsNotificationMatrixProps) {
const [state, setState] = React.useState(events)
const optional = state.filter((event) => !event.required)
function toggle(eventId: string, channel: NotificationChannel) {
setState((current) =>
current.map((event) =>
event.id === eventId
? { ...event, channels: { ...event.channels, [channel]: !event.channels[channel] } }
: event,
),
)
}
/** Column header toggle — all on unless they already all are. */
function toggleColumn(channel: NotificationChannel) {
const allOn = optional.every((event) => event.channels[channel])
setState((current) =>
current.map((event) =>
event.required
? event
: { ...event, channels: { ...event.channels, [channel]: !allOn } },
),
)
}
return (
<section
className={`rounded-2xl border border-border bg-card text-card-foreground ${className}`}
>
<fieldset className="min-w-0 p-5 sm:p-6">
<legend className="text-base font-semibold">Notifications</legend>
<p className="mt-1 text-sm text-muted-foreground">
Choose where each kind of message goes. Changes save as you make them.
</p>
<div className="relative mt-6 overflow-x-auto">
<table className="w-full min-w-[34rem] border-collapse text-start text-sm">
<thead>
<tr className="border-b border-border">
<th scope="col" className="py-2.5 pe-4 font-semibold">
Event
</th>
{CHANNELS.map(({ id, label, Icon }) => {
const on = optional.filter((event) => event.channels[id]).length
return (
<th key={id} scope="col" className="px-3 py-2.5 text-center font-semibold">
<button
type="button"
onClick={() => toggleColumn(id)}
className="mx-auto flex flex-col items-center gap-1 rounded-lg px-2 py-1 transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
>
<Icon aria-hidden className="h-4 w-4 text-muted-foreground" />
{label}
<span className="text-[11px] font-normal text-muted-foreground">
{on}/{optional.length}
</span>
<span className="sr-only">
Toggle {label} for all {optional.length} optional events
</span>
</button>
</th>
)
})}
</tr>
</thead>
<tbody>
{state.map((event) => (
<tr key={event.id} className="border-b border-border/60 last:border-0">
<th scope="row" className="max-w-xs py-3.5 pe-4 font-medium">
{event.label}
<span className="mt-0.5 block text-xs font-normal text-muted-foreground">
{event.description}
</span>
</th>
{event.required ? (
/*
One cell spanning the row rather than three disabled
checkboxes. A greyed-out control still reads as
"something I could turn on if I upgraded"; a sentence
reads as the policy it is.
*/
<td colSpan={CHANNELS.length} className="px-3 py-3.5">
<span className="flex items-center justify-center gap-2 rounded-lg bg-muted/60 px-3 py-2 text-xs text-muted-foreground">
<Lock aria-hidden className="h-3.5 w-3.5 shrink-0" />
{event.requiredReason}
</span>
</td>
) : (
CHANNELS.map(({ id, label }) => (
<td key={id} className="px-3 py-3.5 text-center">
<input
type="checkbox"
checked={event.channels[id]}
onChange={() => toggle(event.id, id)}
aria-label={`${event.label} via ${label}`}
className="h-4 w-4 accent-primary"
/>
</td>
))
)}
</tr>
))}
</tbody>
</table>
</div>
</fieldset>
</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/settings-notification-matrix.tsx and import it where you need the section:
import { SettingsNotificationMatrix } from '@/components/settings-notification-matrix'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 |
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.
settings-notification-matrix.html
<!--
Notification Channel 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="rounded-2xl border border-border bg-card text-card-foreground ">
<fieldset class="min-w-0 p-5 sm:p-6">
<legend class="text-base font-semibold">Notifications</legend>
<p class="mt-1 text-sm text-muted-foreground">Choose where each kind of message goes. Changes save as you make them.</p>
<div class="relative mt-6 overflow-x-auto">
<table class="w-full min-w-[34rem] border-collapse text-start text-sm">
<thead>
<tr class="border-b border-border">
<th scope="col" class="py-2.5 pe-4 font-semibold">Event</th>
<th scope="col" class="px-3 py-2.5 text-center font-semibold">
<button type="button" class="mx-auto flex flex-col items-center gap-1 rounded-lg px-2 py-1 transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"><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-4 w-4 text-muted-foreground" 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>Email<span class="text-[11px] font-normal text-muted-foreground">2/4</span><span class="sr-only">Toggle Email for all 4 optional events</span></button>
</th>
<th scope="col" class="px-3 py-2.5 text-center font-semibold">
<button type="button" class="mx-auto flex flex-col items-center gap-1 rounded-lg px-2 py-1 transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"><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 text-muted-foreground" 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>Slack<span class="text-[11px] font-normal text-muted-foreground">2/4</span><span class="sr-only">Toggle Slack for all 4 optional events</span></button>
</th>
<th scope="col" class="px-3 py-2.5 text-center font-semibold">
<button type="button" class="mx-auto flex flex-col items-center gap-1 rounded-lg px-2 py-1 transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"><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 text-muted-foreground" 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>Push<span class="text-[11px] font-normal text-muted-foreground">1/4</span><span class="sr-only">Toggle Push for all 4 optional events</span></button>
</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-border/60 last:border-0">
<th scope="row" class="max-w-xs py-3.5 pe-4 font-medium">Security alerts<span class="mt-0.5 block text-xs font-normal text-muted-foreground">New sign-ins, password changes, recovery codes used.</span></th>
<td colSpan="3" class="px-3 py-3.5">
<span class="flex items-center justify-center gap-2 rounded-lg bg-muted/60 px-3 py-2 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.5 w-3.5 shrink-0" 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>Always sent by email — a security notice you can turn off is not one.</span>
</td>
</tr>
<tr class="border-b border-border/60 last:border-0">
<th scope="row" class="max-w-xs py-3.5 pe-4 font-medium">Billing and receipts<span class="mt-0.5 block text-xs font-normal text-muted-foreground">Invoices, failed payments, plan changes.</span></th>
<td colSpan="3" class="px-3 py-3.5">
<span class="flex items-center justify-center gap-2 rounded-lg bg-muted/60 px-3 py-2 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.5 w-3.5 shrink-0" 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>Receipts are sent by email for tax and dispute records.</span>
</td>
</tr>
<tr class="border-b border-border/60 last:border-0">
<th scope="row" class="max-w-xs py-3.5 pe-4 font-medium">Incidents<span class="mt-0.5 block text-xs font-normal text-muted-foreground">An alert rule fired, or a service is degraded.</span></th>
<td class="px-3 py-3.5 text-center">
<input type="checkbox" aria-label="Incidents via Email" class="h-4 w-4 accent-primary" />
</td>
<td class="px-3 py-3.5 text-center">
<input type="checkbox" aria-label="Incidents via Slack" class="h-4 w-4 accent-primary" checked="" />
</td>
<td class="px-3 py-3.5 text-center">
<input type="checkbox" aria-label="Incidents via Push" class="h-4 w-4 accent-primary" checked="" />
</td>
</tr>
<tr class="border-b border-border/60 last:border-0">
<th scope="row" class="max-w-xs py-3.5 pe-4 font-medium">Mentions and replies<span class="mt-0.5 block text-xs font-normal text-muted-foreground">Someone named you in a comment or thread.</span></th>
<td class="px-3 py-3.5 text-center">
<input type="checkbox" aria-label="Mentions and replies via Email" class="h-4 w-4 accent-primary" checked="" />
</td>
<td class="px-3 py-3.5 text-center">
<input type="checkbox" aria-label="Mentions and replies via Slack" class="h-4 w-4 accent-primary" checked="" />
</td>
<td class="px-3 py-3.5 text-center">
<input type="checkbox" aria-label="Mentions and replies via Push" class="h-4 w-4 accent-primary" />
</td>
</tr>
<tr class="border-b border-border/60 last:border-0">
<th scope="row" class="max-w-xs py-3.5 pe-4 font-medium">Weekly summary<span class="mt-0.5 block text-xs font-normal text-muted-foreground">One digest of the week, sent Monday morning.</span></th>
<td class="px-3 py-3.5 text-center">
<input type="checkbox" aria-label="Weekly summary via Email" class="h-4 w-4 accent-primary" checked="" />
</td>
<td class="px-3 py-3.5 text-center">
<input type="checkbox" aria-label="Weekly summary via Slack" class="h-4 w-4 accent-primary" />
</td>
<td class="px-3 py-3.5 text-center">
<input type="checkbox" aria-label="Weekly summary via Push" class="h-4 w-4 accent-primary" />
</td>
</tr>
<tr class="border-b border-border/60 last:border-0">
<th scope="row" class="max-w-xs py-3.5 pe-4 font-medium">Product updates<span class="mt-0.5 block text-xs font-normal text-muted-foreground">New features and changelog highlights.</span></th>
<td class="px-3 py-3.5 text-center">
<input type="checkbox" aria-label="Product updates via Email" class="h-4 w-4 accent-primary" />
</td>
<td class="px-3 py-3.5 text-center">
<input type="checkbox" aria-label="Product updates via Slack" class="h-4 w-4 accent-primary" />
</td>
<td class="px-3 py-3.5 text-center">
<input type="checkbox" aria-label="Product updates via Push" class="h-4 w-4 accent-primary" />
</td>
</tr>
</tbody>
</table>
</div>
</fieldset>
</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
Want the whole screen instead of this one section? Open a page and copy it entire.
7 more blocks in Settings
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 SettingsShipping 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
More Settings blocks
View categoryProfile Form With Save Bar
Avatar, fields and a character counter, with a sticky save bar that only appears once something has genuinely changed.
Team Members & Invites
Member list with role selects, pending invites shown inline, and the last owner locked so a workspace cannot be orphaned.
API Key Management
Masked keys, a create flow that reveals the secret exactly once, and a revoke that confirms before it fires.
Danger Zone
Destructive actions gated by typing the resource name exactly — the pattern GitHub and Stripe use, and for good reason.
Active Sessions & Devices
The screen people go looking for after losing a laptop. Sign out everywhere states what it does not reach — API keys keep working — locations are written as estimates, and this device is labelled rather than revocable by misclick.