Switch

Component

About

A tactile toggle switch for settings that take effect immediately, with a spring-animated thumb that stretches like a held finger while pressed.

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

Code

How Switch is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import * as React from "react";
import { Switch } from "@/components/ui/switch";

export default function SwitchDemo() {
  const [checked, setChecked] = React.useState(false);

  return (
    <div className="flex min-h-[200px] w-full items-center justify-center bg-[var(--background)] text-[var(--foreground)]">
      <Switch
        label="Enable notifications"
        checked={checked}
        onCheckedChange={setChecked}
      />
    </div>
  );
}