Switch

Buttons 13

About

Choose between a set of options.

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 { Switch } from "@/components/ui/switch";
import { Tooltip } from "@/components/ui/tooltip-1";

export default function TooltipDemo() {
  return (
        <Switch>
          <Tooltip text="View Source" className="h-full">
            <Switch.Control
              defaultChecked
              label="Source"
              name="tooltip"
              size="large"
              value="source"
            />
          </Tooltip>
          <Tooltip text="View Output" className="h-full">
            <Switch.Control
              label="Output"
              name="tooltip"
              size="large"
              value="output"
            />
          </Tooltip>
        </Switch>
  );
}