Notification preferences

Pro

What people are told about and where: every event against email, in-app and push, one switch per group that shows when only some are on, a digest for the rest, and a pause with a visible end.

Installs components/ui/notification-preferences.tsxDepends on @radix-ui/react-popover, @radix-ui/react-slot, lucide-reactMotion shared motion tokens

pnpm dlx shadcn@latest add @caliper/notification-preferences

Used by every workspace that has not been customised.

Pause notificationsSilence everything except required messages for a while.

Quiet hoursNo push or in-app alerts from 19:00 to 08:00, or at weekends. Required messages still arrive.

toWeekends

Send a test

Email digestEverything else you have email off for, gathered into one message.

Notification settings: each event against each channel
Event	Email	In app	Push
Your work
MentionsSomeone @mentions you in a comment.
Assigned to youA ticket, task or invoice is given to you.
Due soonSomething of yours is due within a day.
Your team
ApprovalsAn expense or payment waits for you.
New membersSomeone joins the workspace.			–
Account and security
New sign-inYour account is used on a new device.
BillingReceipts, failed payments and plan changes.			–

Checked and greyed out: always sent, such as security alerts.

When to use #

Use it for

The notifications page in account settings.
Any product that sends more than a handful of kinds of message.

Skip it when

A single on/off for one kind of email; use a switch in a settings row.

Installation #

terminal

pnpm dlx shadcn@latest add @caliper/notification-preferences

Adds its 8 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx

import { NotificationPreferences } from "@/components/ui/notification-preferences"

The worked example comes with Pro

The 79-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

NotificationPreferences

component

PropTypeDefaultDescription

channels *readonly NotificationChannel[]—

groups *readonly NotificationGroup[]—

value *NotificationValue—

onValueChange *(value: NotificationValue) => void—

digestDigestFrequency—Leave out to hide the digest setting.

onDigestChange((digest: DigestFrequency) => void)—

pausedUntilstring | null—ISO time notifications are paused until, or null. Leave out to hide pausing.

onPausedUntilChange((until: string | null) => void)—

quietHoursQuietHours—

onQuietHoursChange((hours: QuietHours) => void)—

workspacesreadonly { id: string; name: string; }[]—Workspaces that can have their own settings; the grid shows `value` for the chosen one.

scopestring"all""all" for your defaults, or a workspace id.

onScopeChange((scope: string) => void)—

customisedbooleantrueWhether the chosen workspace has its own settings rather than your defaults.

onCustomisedChange((customised: boolean) => void)—

onTest((channel: string) => void | Promise<void>)—Sends a test notification on a channel.

nowstringnew Date().toISOString()ISO time treated as now, for the pause.

classNamestring—

Motion #

Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.