Notification preferences

A React block (a whole screen) in Beamline's Blocks category.

What reaches a person and where: events grouped by area down the side, channels (email, push, Slack, in-app) across the top, a switch per pair that saves on its own and steps back if refused, a column switch for a whole channel, channels that still need connecting, alerts that cannot be turned off, a digest, quiet hours and a pause for everything. In a narrow room each event carries its channels as a row of toggles.

Use it for

The Notifications page of a product: which events reach a person by which channel, plus digest, quiet hours and pause.
Any per-event, per-channel opt-in that should apply the moment it is changed.

Not for

What a role may do, saved as one change (roles-permissions).
The inbox of notifications themselves (notification-center).
A single on/off preference (switch).

Anatomy

header: title, saved caption (Saved · just now), Pause all (a menu of how long)
paused notice: until when, Resume (the primary action while paused)
matrix: events grouped by area with one line each; channel columns with their address or room, a column switch, or Connect when the channel is not set up; a switch per event and channel; a lock where an alert always goes
narrow room (under 36rem): each event with a row of channel toggles (icons, named in tooltips and to assistive tech)
digest: off, daily or weekly, and when it arrives
quiet hours: on or off, from and to, the days they apply

States

loading; load failed (Try again)
a switch saving (busy), saved (caption), refused (steps back, says why, Retry)
a whole channel on, off or mixed
channel not connected (Connect; its switches wait)
required: always sent on that channel (locked, says why on hover and focus)
paused until a time; resumed
quiet hours off; on with times and days; saving
partial data: an event with no setting yet reads off, never guessed on
A whole-channel save waits for pending cells in that channel; while it saves, its cells wait too. Other channels remain usable.

Keyboard

Tab through the switches row by row; Space toggles; each is named “Deal won by email”
Pause all: Enter opens the menu, arrows choose
Quiet hours: type the times or step them with arrows; days are toggles

Motion

A switch's thumb slides as it saves and slides back if refused. The saved caption fades in and out. The paused notice folds open and closed. A channel switch turns every switch in its column with a short stagger down the column. Reduced motion places everything at once.

Props

Prop	Type	Default	Description
`channels` (required)	`NotifyChannel[]`	—	id, label, icon, detail (address or room), connected (false shows Connect).
`events` (required)	`NotifyEvent[]`	—	id, label, group, description, required channel ids (always on).
`value / defaultValue / onValueChange`	`Record<string, string[]>`	—	The channels each event goes to.
`onToggle` (required)	`(event: string \| null, channel: string, on: boolean) => Promise<void>`	—	Saves one change (event null: the whole channel); a rejection steps it back.
`digest / onDigestChange`	`"off" \| "daily" \| "weekly" / (value) => Promise<void>`	—	Shows the digest panel.
`quietHours / onQuietHoursChange`	`QuietHours / (value) => Promise<void>`	—	Shows the quiet hours panel.
`pausedUntil / onPause`	`number \| null / (until: number \| null) => Promise<void>`	—	Shows Pause all.
`onConnectChannel`	`(id) => void`	—	Connect on a channel that is not set up.
`loading / error / onRetry`	`boolean / ReactNode / () => void \| Promise<unknown>`	—
`level`	`1 \| 2`	—
`className / classNames / style / ref`	`string / NotificationPreferencesClassNames / CSSProperties / Ref<HTMLDivElement>`	—

Built from

switch
toggle-group
segmented-control
time-picker
dropdown-menu
button
badge
alert
tooltip
toast
skeleton

Dependencies

lucide-react, motion

Import

import { NotificationPreferences } from "@/blocks/notification-preferences/notification-preferences";

Get it

Notification preferences is part of Beamline: 200+ components and 50+ complete screens for React that your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 launch price, one payment, no subscription, lifetime updates, one licence for your whole team. Get Beamline · Connect your agent