buttons

Lever Switch

A tactile animated machine lever that rocks between states and illuminates its base when switched on.

Inspired by @theutkarshmail · View source

Preview

Copy for AI

Copy for Lovable is the fastest way to move this component into another Lovable project — it copies the full prompt with dependencies, files, and a usage example. Copy all files gives you the raw source if you want to paste it manually.

Installation

npx @21st-dev/cli add theutkarshmail/lever-switch

Paste into a terminal — or paste into a Lovable chat and I'll run it for you.

Source files

components/ui/lever-switch.tsx

import { useId } from "react";
import "./lever-switch.css";

type LeverSwitchProps = {
  defaultChecked?: boolean;
  label?: string;
};

export function LeverSwitch({
  defaultChecked = false,
  label = "Toggle lever",
}: LeverSwitchProps) {
  const id = useId();

  return (
    <div className="lever-switch">
      <input
        id={id}
        className="lever-switch__input"
        type="checkbox"
        defaultChecked={defaultChecked}
        aria-label={label}
      />
      <div className="lever-switch__handle-wrapper" aria-hidden="true">
        <div className="lever-switch__handle">
          <div className="lever-switch__knob" />
          <div className="lever-switch__bar-wrapper">
            <div className="lever-switch__bar" />
          </div>
        </div>
      </div>
      <div className="lever-switch__base" aria-hidden="true">
        <div className="lever-switch__base-inside" />
      </div>
    </div>
  );
}

export default LeverSwitch;