Notification Preferences Panel React component
A notification settings screen: a matrix of events by channel with select-all columns, security alerts that can't be turned off, email frequency from instant to weekly, quiet hours with days, pause all with a banner, a test notification that slides in, and a save bar.
About the Notification Preferences Panel component
Notification Preferences Panel is where people decide what they hear about and how: in the app, by email or as a push notification. Each event has its own row and each channel its own column.
Beyond the matrix it covers the details people look for: how often emails arrive, quiet hours on chosen days, a quick pause for focus time, and a test notification to see what one looks like. Critical security alerts stay on no matter what.
When to use it
Use it on account settings pages in SaaS apps, collaboration tools and any product that sends notifications on more than one channel.
Group events the way people think about them (activity, projects, account) and keep the list short.
Installation
Add the Notification Preferences Panel component to your project with the shadcn CLI. It lands in components/notification-preferences-panel.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/notification-preferences-panelOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<NotificationPreferencesPanel /> accepts 4 props (required ones are marked *).
| Prop | Type | Default |
|---|---|---|
| defaultValue | object | DEFAULT |
| defaultValue.matrix* | Record<string, Record<Channel, boolean>> | — |
| defaultValue.digest* | "instant" | "hourly" | "daily" | "weekly" | — |
| defaultValue.quiet* | { on: boolean; from: string; to: string; days: number[] } | — |
| onSave | (prefs: NotificationPrefs) => Promise<void> | void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- defaultValueobjectDefault: DEFAULT
- defaultValue.matrix*Record<string, Record<Channel, boolean>>
- defaultValue.digest*"instant" | "hourly" | "daily" | "weekly"
- defaultValue.quiet*{ on: boolean; from: string; to: string; days: number[] }
- onSave(prefs: NotificationPrefs) => Promise<void> | void
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Notification Preferences Panel FAQ
- How do I save the preferences?
- onSave receives the whole object: the matrix of event ids and channels, the email frequency and the quiet hours. The save bar appears as soon as anything changes.
- Why can't security alerts be turned off?
- Marking an event as locked keeps it on in every channel and disables its checkboxes, which is what people expect for sign-in and password alerts. Column select-all skips locked rows.
- What does Pause all do?
- It shows a banner with the end time and dims the matrix. Store the pause end time on your server and skip sending until then, except for locked events.
- Can I add channels?
- Yes. Add an entry to the channels list and a key to each row in the matrix; the column, its select-all box and the cells appear automatically.
- Is it accessible?
- Every cell is a native checkbox labelled with event and channel, select-all boxes use the indeterminate state, the frequency control is a radiogroup, quiet days are toggle buttons with full names, and the pause banner is a status message.
