Liquid Toggle
A toggle with a liquid/blob-like transition. The internal shape deforms organically as it travels from off to on — stretching along the travel axis and settling into a natural blob shape rather than simply translating.
Installation
Add the component directly to your repository using shadcn CLI:
npx shadcn@latest add Surajmaurya1/easyui/liquid-toggle
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| value | boolean | undefined | Controlled value |
| defaultValue | boolean | false | Initial value for uncontrolled mode |
| onChange | (value: boolean) => void | undefined | Toggle change callback |
| disabled | boolean | false | Disabled state |
| offLabel | string | 'Off' | Screen reader label when off |
| onLabel | string | 'On' | Screen reader label when on |
| accentColor | string | '#FAFAFA' | Blob color when on |
| showLabels | boolean | true | Show OFF/ON text inside the track |
| width | number | 56 | Track width in px |
| height | number | 32 | Track height in px |