KQ-897 · MUTE/BELL

Mute Bell

A bell that goes quiet for a stated length of time. Pressing it unfolds a duration picker in flow below the row on glide against a ResizeObserver-measured height, and choosing one folds the picker, swings the bell on a four-keyframe tween and draws the slash across it on flick. A ring around the bell then drains a second at a time while the row's second line reads the time left in place of the topic, cross-faded in one grid cell; Escape folds the picker and returns focus to the bell.

KQ-897 · MUTE/BELL

#dispatchMorning run, gate B

#night-shiftRota for the week

Both channels on · pick a duration

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/mute-bell

Props

channel: string; default —; The channel's name, printed after a hash.
topic: string; default —; The row's second line while notifications are on.
durations: MuteDuration[]; default 30 minutes / 1 hour / 8 hours / Until I say; The picker's stops; an ms of 0 means until it is turned back on.
open / defaultOpen: boolean; default false; Controlled or initial picker state.
onOpenChange: (open: boolean) => void; default —; Fires from the bell, Escape, or a chosen duration.
onMuteChange: (mute: MuteDuration | null) => void; default —; Fires with the chosen duration, or null when notifications come back on.
onExpire: () => void; default —; Fires once when the countdown reaches zero.
speed: number; default 1; Countdown milliseconds per real millisecond; the demo runs it fast so the ring drains while you watch.
label: string; default —; Names the channel in the spoken sentences; defaults to the hashed channel.

Prop	Type	Default	Description
channel	string	—	The channel's name, printed after a hash.
topic	string	—	The row's second line while notifications are on.
durations	MuteDuration[]	30 minutes / 1 hour / 8 hours / Until I say	The picker's stops; an ms of 0 means until it is turned back on.
open / defaultOpen	boolean	false	Controlled or initial picker state.
onOpenChange	(open: boolean) => void	—	Fires from the bell, Escape, or a chosen duration.
onMuteChange	(mute: MuteDuration \| null) => void	—	Fires with the chosen duration, or null when notifications come back on.
onExpire	() => void	—	Fires once when the countdown reaches zero.
speed	number	1	Countdown milliseconds per real millisecond; the demo runs it fast so the ring drains while you watch.
label	string	—	Names the channel in the spoken sentences; defaults to the hashed channel.