A switch whose knob behaves like jelly. It squashes under the press, stretches in the direction of travel and wobbles into place, and it also follows a drag or a flick.
Airplane mode
off
Wi-Fi
connected
Bluetooth
connected
npx shadcn@latest add https://hyperblur.dev/r/micro-squish-switch.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/micro-squish-switch.tsx.
import { MicroSquishSwitch } from "@/components/hyperblur/micro-squish-switch"
<MicroSquishSwitch label="Wi-Fi" defaultChecked onChange={(on) => console.log(on)} />| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | Controlled state. Pair with onChange. | |
| defaultChecked | boolean | false | Initial state when uncontrolled. |
| label | string | Text next to the switch. Pressing it toggles too. | |
| size | number | 38 | Track height in pixels. The width is 1.8 times the height. |
| accent | string | "#2f7bff" | Track color when on. |
| idle | boolean | true | Poke the knob now and then until the pointer or focus arrives. |
| disabled | boolean | false | Block interaction and dim the switch. |
| onChange | (checked: boolean) => void | Called with the new state on every toggle. | |
| className / style / ...rest | ButtonHTMLAttributes<HTMLButtonElement> | Forwarded to the root button, which carries role switch. |