A pill toggle whose thumb stretches like liquid as it travels, built from two blobs merged by an SVG gooey filter.
Watering reminders
Every morning at 8:00
Weekly digest
Care tips on Sundays
Share growth photos
Visible to club members
npx shadcn@latest add https://hyperblur.dev/r/toggle-gooey.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/toggle-gooey.tsx.
import { ToggleGooey } from "@/components/hyperblur/toggle-gooey"
<ToggleGooey label="Notifications" defaultChecked />| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | Controlled state. Pair with onCheckedChange. | |
| defaultChecked | boolean | false | Initial state when uncontrolled. |
| onCheckedChange | (checked: boolean) => void | Called with the new state on every toggle. | |
| size | number | 32 | Height of the switch in pixels. The width is 1.75 times the height. |
| label | string | "Toggle" | Accessible name of the switch. |
| accent | string | "#2f7bff" | Track color when on. |
| disabled | boolean | false | Disable the switch. |
| name | string | Form field name of the underlying checkbox. |