Headless Switch

An animated toggle switch built on Headless UI's Switch primitive, for turning a single setting on or off with optional start/end/thumb icons.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Headless Switch to your project and fits it to your theme.

import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/components-headless-switch";

export default function HeadlessSwitchDemo() {
  return (
    <Label className="flex items-center gap-x-3">
      <Switch />
      Airplane Mode
    </Label>
  );
}