Liquid Switch

Elastic toggle switch with velocity-based organic stretch and spring return physics.

6 KB

•

Updated on September 17, 2026

Disabled

Installation

Bash

pnpm dlx shadcn@latest add @spaceui/components-spaceui-liquid-switch

Code

import { LiquidSwitch } from '@/components/spaceui/liquid-switch'

export default function Example() {
  return <LiquidSwitch />
}

Prop	Type	Default	Description
`checked`	boolean	—	Controlled checked state
`defaultChecked`	boolean	false	Default checked state
`onCheckedChange`	(checked: boolean) => void	—	Toggle change callback
`stretch`	number	36	Dynamic elongation factor (0-100)
`label`	string	—	Optional companion label
`disabled`	boolean	false	Disabled interaction

MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.

On This Page