Jelly Switch

The knob stretches as it travels, squashes when it lands and wobbles before settling. Holding it squeezes it. For settings with personality.

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal

npx @galactrex/ui add jelly-switch

Example

import { JellySwitch } from "@/components/galactrex/jelly-switch";

<JellySwitch label="Sound effects" showLabel defaultChecked />

Installs to components/galactrex/jelly-switch.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

Prop	Type	Default	Description
`label`	`string`	—	What it switches.
`checked / defaultChecked`	`boolean`	—	Controlled or initial state.
`onChange`	`(checked: boolean) => void`	—	Called on toggle.
`disabled`	`boolean`	—	Disables it.
`showLabel`	`boolean`	`false`	Show the label beside it.
`className`	`string`	—	Extra classes for the outer element.