A switch whose knob squishes and overshoots when you flip it.
npx shadcn@latest add https://hyperblur.dev/r/spring-toggle.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/spring-toggle.tsx.
import { SpringToggle } from "@/components/hyperblur/spring-toggle"
<SpringToggle label="Notifications" defaultChecked />| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | Controlled state. Pair with onChange. | |
| defaultChecked | boolean | false | Initial state when uncontrolled. |
| onChange | (checked: boolean) => void | Called with the new state on every toggle. | |
| size | "sm" | "md" | "lg" | "md" | Track and knob size. |
| color | string | "#2f7bff" | Track color when on. |
| label | string | Text next to the switch. Clicking it toggles too. | |
| disabled | boolean | false | Block interaction and dim the switch. |