KQ-937 · QUIET/HOURS

Quiet Hours

A nightly window on a 24-hour rail, shaded as two segments when it crosses midnight because a night past the date line is still one window. Dragging a handle moves it 1:1 with the pointer and captures only after four pixels of travel, while a settled or keyed change re-shades on glide; inside the window the bell's two sound arcs retract by pathLength on flick and it dims, and underneath the next change counts down over a draining hairline. Each handle is a real slider: Arrow keys move by step, Page Up and Page Down by an hour, Home and End jump to the ends of the day.

KQ-937 · QUIET/HOURS

Quiet hours10:00 pm – 7:00 am

Quiet starts in 1 h 30 min

Notifications on · 10:00 pm – 7:00 am · now 8:30 pm

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/quiet-hours

Props

start / defaultStart: number; default 1320; Minutes past midnight when quiet begins.
end / defaultEnd: number; default 420; Minutes past midnight when quiet ends.
onRangeChange: (range: { start: number; end: number }) => void; default —; Fires from the setter that moved a handle, with both ends.
enabled / defaultEnabled: boolean; default true; Whether the window applies; the switch drives it.
onEnabledChange: (enabled: boolean) => void; default —; Fires from the switch.
nowMinutes: number; default 1230; The host's minute of the day, 0 to 1439. The component never reads a clock.
step: number; default 15; Minutes per keyboard nudge and per pointer snap.
onQuietChange: (quiet: boolean) => void; default —; Fires each time the window opens or closes around nowMinutes.
label: string; default "Quiet hours"; The strip's heading, and the switch's name.

Prop	Type	Default	Description
start / defaultStart	number	1320	Minutes past midnight when quiet begins.
end / defaultEnd	number	420	Minutes past midnight when quiet ends.
onRangeChange	(range: { start: number; end: number }) => void	—	Fires from the setter that moved a handle, with both ends.
enabled / defaultEnabled	boolean	true	Whether the window applies; the switch drives it.
onEnabledChange	(enabled: boolean) => void	—	Fires from the switch.
nowMinutes	number	1230	The host's minute of the day, 0 to 1439. The component never reads a clock.
step	number	15	Minutes per keyboard nudge and per pointer snap.
onQuietChange	(quiet: boolean) => void	—	Fires each time the window opens or closes around nowMinutes.
label	string	"Quiet hours"	The strip's heading, and the switch's name.