Switch

A disc of glass riding a recessed track. Held down — pointer or Space — it swells into a magnifying capsule that refracts the track, then springs into place.

Install

$ pnpm dlx shadcn@latest add https://vitrumui.vercel.app/r/switch.json

Examples

Default

Ambient drift Reduced transparency

"use client";

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

export function SwitchDemo() {
  return (
    <div className="flex flex-col gap-4">
      <label className="flex items-center gap-3 text-sm">
        <Switch defaultChecked /> Ambient drift
      </label>
      <label className="flex items-center gap-3 text-sm">
        <Switch /> Reduced transparency
      </label>
    </div>
  );
}

API

<Switch />

Prop	Type	Default	Description
checked	boolean	—	Controlled state.
defaultChecked	boolean	false	Uncontrolled initial state.
onCheckedChange	(checked: boolean) => void	—	Change callback.