Animated Switch

toggle x spring

Toggle switch with spring-animated thumb slide. From Animate UI.

switchtogglespringanimateui

Code

switch-animated.tsx

"use client";
import { useState } from "react";

export function Switch({ checked, onChange }: { checked?: boolean; onChange?: (v: boolean) => void }) {
  const [on, setOn] = useState(checked || false);
  const isControlled = checked !== undefined;
  return (
    <button onClick={() => isControlled ? onChange?.(!checked) : setOn(!on)}
      className={`relative h-7 w-12 rounded-full transition-colors ${(isControlled ? checked : on) ? "bg-brand" : "bg-muted"}`}>
      <span className={`absolute left-1 top-1 size-5 rounded-full bg-white shadow transition-transform ${(isControlled ? checked : on) ? "translate-x-5" : ""}`} />
    </button>
  );
}

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Animated Switch component and wire it to my accent.”