Switch

A switch whose knob lifts into a lens as it slides. Drag it, flick it or tap it.

Wi-Fi

Installation#

pnpmnpmyarnbun

$ pnpm dlx shadcn@latest add @liquikit/switch

Needs the @liquikit registry in your components.json. Set it up once.

import { Switch } from "@/components/liquikit/switch"

<Switch defaultChecked aria-label="Wi-Fi" />

Wrap it in a label, or give it an aria-label, so it has an accessible name.

Pass checked and onCheckedChange to keep the state yourself.

Airplane mode is off

The track takes any width and height. The knob and the lens scale with it.

Prop	Type	Default
`theme`	`"light" \| "dark"` Light or dark glass. Falls back to the nearest `GlassThemeProvider`, then light.	—
`lens`	`Partial<LensProfile>` Overrides for the lens profile, such as `thickness`, `bevel`, `ior` and `magnification`.	—
`liquid`	`number` How far the glass squashes and stretches as it moves. `0` keeps it rigid.	—
`onCheckedChange`	`(checked: boolean, eventDetails?: BaseSwitch.Root.ChangeEventDetails) => void` Called with the new state when the switch flips.	—
`width`	`number` Width of the track, in pixels.	74
`height`	`number` Height of the track, in pixels.	28

Also takes every prop of Base UI's switch, plus className and style.