Switch
Toggle switches in three sizes with a stretch-on-press thumb.
A switch turns a setting on or off immediately. The Cuelark switch thumb stretches while pressed and settles when released, a small tactile cue that the press registered, and it comes in three sizes for dense settings lists.
Preview
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/switch.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/switch.
Builds on: motion
Usage
import { Switch } from "@/components/ui/switch";
<Switch id="digest" defaultChecked />Examples
Settings list
Labeled settings separated by dashed rules.
Motion
CSS moves the thumb; GSAP adds an elastic squash as it lands. The thumb also stretches while pressed.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
Switch
Extends Radix Switch.Root (checked, defaultChecked, onCheckedChange, name, …).
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "md" | Track and thumb size. |
Accessibility
- Uses role="switch" with aria-checked.
- Label it with a <label htmlFor> or aria-label.
- Space and Enter toggle; the press animation is skipped for reduced motion.
FAQ
Also searched as: react switch · shadcn switch · toggle switch · settings toggle · tailwind switch