KQ-1497 · CHIME/BELL

Chime Bell

A notifications toggle drawn as a hand bell with a real pendulum inside: turning it on kicks the bell about its crown, and the bell and its clapper — two damped pendulums with different periods, integrated at 240 Hz — swing out of step, so the rim catches the clapper at the extremes in genuine collisions, each heard as a chime as loud as the impact, until the damping settles both to rest and the loop stops. Turning it off catches the bell on springs.snap, greys it in oklab and straps it still with a belt and a buckle that pops on springs.snap, two crossed straps, or tape over the mouth. It is a real toggle button with aria-pressed, so Space and Enter ring it or mute it.

KQ-1497 · CHIME/BELL

Fieldline · project

Spring launch

Ada, Tomas and four others

muted · 3 updates

Open it on the Canvas stage

Install

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

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

Props

pressed / defaultPressed: boolean; default — / false; Whether notifications are on, controlled or uncontrolled.
onPressedChange: (pressed: boolean) => void; default —; Fires from the press or key that changed it, with the new state.
label: string; default "Notifications"; What the bell turns on: its accessible name and the first line under it.
onLabel: string; default "On"; The state line while on; it shares a cell with offLabel so the width never changes.
offLabel: string; default "Muted"; The state line while off.
hideLabel: boolean; default false; Keep the label and state line for assistive technology only, leaving just the bell.
swing: number; default 40; How hard turning on kicks the bell: roughly its first swing in degrees. Below about 18° the clapper never reaches the rim.
damping: number; default 0.4; How fast the swing dies, 0 to 1: 0 rings for several strikes, 1 strikes once and settles.
strap: "belt" | "cross" | "tape"; default "belt"; How the bell is held while off: a belt round the waist with a buckle, two crossed straps with a rivet, or tape over the mouth.
count: number; default —; Unread count on a badge (99+ past 99). A rise while on rings the bell silently at half swing; while off the bell strains against its strap.
color: string; default "oklch(from var(--warn) 0.8 0.12 h)"; The bell while on: a brass pigment at fixed lightness, so it reads the same in both themes. Any CSS colour.
mutedColor: string; default "oklch(from var(--ink-3) 0.74 0.01 h)"; The bell while off, mixed from the on colour in oklab. Any CSS colour.
strapColor: string; default "oklch(from var(--warn) 0.5 0.08 h)"; The strap's leather; the tape is a pale tint of it. Any CSS colour.
size: "sm" | "md" | "lg"; default "md"; The bell at 40, 56 or 72px in a well of 60, 80 or 100px; a smaller bell rings higher.
sound: boolean; default false; Play a chime at each strike of the clapper, as loud as the impact and panned to the side it struck. Only rings that a press set going are heard.
disabled: boolean; default false; Disables the button.
className: string; default —; Classes for the button.

Prop	Type	Default	Description
pressed / defaultPressed	boolean	— / false	Whether notifications are on, controlled or uncontrolled.
onPressedChange	(pressed: boolean) => void	—	Fires from the press or key that changed it, with the new state.
label	string	"Notifications"	What the bell turns on: its accessible name and the first line under it.
onLabel	string	"On"	The state line while on; it shares a cell with offLabel so the width never changes.
offLabel	string	"Muted"	The state line while off.
hideLabel	boolean	false	Keep the label and state line for assistive technology only, leaving just the bell.
swing	number	40	How hard turning on kicks the bell: roughly its first swing in degrees. Below about 18° the clapper never reaches the rim.
damping	number	0.4	How fast the swing dies, 0 to 1: 0 rings for several strikes, 1 strikes once and settles.
strap	"belt" \| "cross" \| "tape"	"belt"	How the bell is held while off: a belt round the waist with a buckle, two crossed straps with a rivet, or tape over the mouth.
count	number	—	Unread count on a badge (99+ past 99). A rise while on rings the bell silently at half swing; while off the bell strains against its strap.
color	string	"oklch(from var(--warn) 0.8 0.12 h)"	The bell while on: a brass pigment at fixed lightness, so it reads the same in both themes. Any CSS colour.
mutedColor	string	"oklch(from var(--ink-3) 0.74 0.01 h)"	The bell while off, mixed from the on colour in oklab. Any CSS colour.
strapColor	string	"oklch(from var(--warn) 0.5 0.08 h)"	The strap's leather; the tape is a pale tint of it. Any CSS colour.
size	"sm" \| "md" \| "lg"	"md"	The bell at 40, 56 or 72px in a well of 60, 80 or 100px; a smaller bell rings higher.
sound	boolean	false	Play a chime at each strike of the clapper, as loud as the impact and panned to the side it struck. Only rings that a press set going are heard.
disabled	boolean	false	Disables the button.
className	string	—	Classes for the button.