KQ-1517 · SQUASH/SWITCH

Squash Switch

A switch whose thumb is a soft body: it crosses on a spring whose stiffness you set, stretching along its travel with its speed and thinning to keep its area, and when the underdamped spring carries it past its rest the leading edge stays on the wall and the body flattens against it — narrower, taller, flat where it touches — then rebounds and settles, while a ripple runs through the track's outline from the struck end to the far one. The thumb drags 1:1, squashing as it is pushed past either end, and a release commits by projection with the spring taking the release velocity. It is a role="switch" button: Space and Enter toggle it, Right turns it on and Left off.

KQ-1517 · SQUASH/SWITCH

Night shift

Warmer screen after sunset

True tone

Match the light in the room

night shift on · from 21:00 to 07:00

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/squash-switch

Props

checked / defaultChecked: boolean; default — / false; The switch's state, controlled or uncontrolled.
onCheckedChange: (checked: boolean) => void; default —; Fires from the press, drag or key that changed it, with the new state.
label: string; default —; What the switch controls: its accessible name, shown before it unless hideLabel.
hideLabel: boolean; default false; Keep the label for assistive technology only.
onText: string; default —; A word after the switch while on; the longer of the two words' width is kept, so nothing shifts.
offText: string; default —; A word after the switch while off.
softness: number; default 0.6; How soft the thumb is, 0 to 1: how far it stretches in flight, how flat it squashes on the wall, and how long it wobbles.
speed: number; default 0.5; How quickly the thumb crosses, 0 to 1: the travel spring's stiffness.
ripple: boolean; default true; Send a ripple through the track's outline when the thumb lands.
color: "mint" | "cobalt" | "amber" | "rose" | string; default "mint"; The track's colour while on: a named pigment that reads the same in both themes, or any CSS colour.
thumbColor: string; default "oklch(0.99 0.004 258)"; The thumb's colour; any CSS colour.
size: "sm" | "md" | "lg"; default "md"; Track 44×24, 56×32 or 72×40px.
sound: boolean; default false; A thock as the thumb lands, louder with the impact and duller for a softer thumb; only in answer to the visitor.
disabled: boolean; default false; Disables the switch.
className: string; default —; Classes for the root row.

Prop	Type	Default	Description
checked / defaultChecked	boolean	— / false	The switch's state, controlled or uncontrolled.
onCheckedChange	(checked: boolean) => void	—	Fires from the press, drag or key that changed it, with the new state.
label	string	—	What the switch controls: its accessible name, shown before it unless hideLabel.
hideLabel	boolean	false	Keep the label for assistive technology only.
onText	string	—	A word after the switch while on; the longer of the two words' width is kept, so nothing shifts.
offText	string	—	A word after the switch while off.
softness	number	0.6	How soft the thumb is, 0 to 1: how far it stretches in flight, how flat it squashes on the wall, and how long it wobbles.
speed	number	0.5	How quickly the thumb crosses, 0 to 1: the travel spring's stiffness.
ripple	boolean	true	Send a ripple through the track's outline when the thumb lands.
color	"mint" \| "cobalt" \| "amber" \| "rose" \| string	"mint"	The track's colour while on: a named pigment that reads the same in both themes, or any CSS colour.
thumbColor	string	"oklch(0.99 0.004 258)"	The thumb's colour; any CSS colour.
size	"sm" \| "md" \| "lg"	"md"	Track 44×24, 56×32 or 72×40px.
sound	boolean	false	A thock as the thumb lands, louder with the impact and duller for a softer thumb; only in answer to the visitor.
disabled	boolean	false	Disables the switch.
className	string	—	Classes for the root row.