Rocker Switch

Component

About

A hardware-style rocker switch button that tilts and clicks over between on/off states, with a glowing LED indicator.

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

Code

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

Usage.tsx

"use client";

import RockerSwitch from "@/components/ui/rocker-switch";
import { useState } from "react";

export default function RockerSwitchDemo() {
  const [mains, setMains] = useState(true);
  const [fan, setFan] = useState(false);
  const [lamp, setLamp] = useState(false);
  return (
    <div className="flex min-h-full w-full items-center justify-center p-10 bg-[#0e0f11] text-[#d9dadd]">
      <div className="flex gap-8 rounded-[18px] px-9 py-7 bg-[#1a1b1e] shadow-[inset_0_1px_0_rgb(255_255_255/0.05),0_20px_40px_-20px_rgb(0_0_0/0.8)]">
        <RockerSwitch label="Mains" checked={mains} onChange={setMains} />
        <RockerSwitch
          label="Fan"
          checked={fan}
          onChange={setFan}
          led="#45d483"
        />
        <RockerSwitch
          label="Lamp"
          checked={lamp}
          onChange={setLamp}
          led="#ffc23d"
        />
      </div>
    </div>
  );
}