Switch

Toggle with a springy thumb, three sizes and optional on/off glyphs inside the thumb.

4 files · 232 locdeps: clsx, tailwind-merge

Airplane mode

Wi-Fi and Bluetooth stay on.

Installation

With the shadcn CLI, pointing at this platform’s registry:

npx shadcn@latest add https://opusui.131199999.xyz/r/switch.json

Or offline, straight from your opus55 checkout (copies every file it needs):

node ../tailwind_component/opus55/scripts/add.mjs switch

import { Switch } from "@/components/opus/ui/switch";

<Switch checked={on} onCheckedChange={setOn} />

Prop	Type	Default	Description
checked / defaultChecked	boolean	—	Controlled / uncontrolled state.
onCheckedChange	(checked: boolean) => void	—	Change handler.
size	"sm" \| "md" \| "lg"	"md"	Track size.
thumbOn / thumbOff	ReactNode	—	Tiny glyph inside the thumb per state.