Switch Button

Buttons 131

About

Here is Switch Button component

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

Code

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

Usage.tsx

"use client";

import { useState } from "react";
import { Sun, Moon } from "lucide-react";
import { Switch } from "@/components/ui/switch-button";

export default function DemoSwitch() {
  const [darkMode, setDarkMode] = useState(false);

  return (
    <div className="flex flex-col items-center justify-center min-h-screen gap-6 bg-background">
      <h1 className="text-xl font-semibold">
        {darkMode ? "Dark Mode" : "Light Mode"}
      </h1>
      <Switch
        value={darkMode}
        onToggle={() => setDarkMode((prev) => !prev)}
        iconOn={<Moon className="size-4" />}
        iconOff={<Sun className="size-4" />}
      />
    </div>
  );
}