Animated Toggle

Component 11

About

A toggle switch with spring animations and default, morph, and icon variants for on/off states.

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

Code

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

Usage.tsx

"use client";

import AnimatedToggle from "@/components/ui/animated-toggle";
import { useState } from "react";

const SunIcon = () => (
  <svg
    aria-hidden="true"
    className="size-full"
    fill="none"
    stroke="currentColor"
    strokeLinecap="round"
    strokeLinejoin="round"
    strokeWidth="2"
    viewBox="0 0 24 24"
  >
    <circle cx="12" cy="12" r="5" />
    <line x1="12" x2="12" y1="1" y2="3" />
    <line x1="12" x2="12" y1="21" y2="23" />
    <line x1="4.22" x2="5.64" y1="4.22" y2="5.64" />
    <line x1="18.36" x2="19.78" y1="18.36" y2="19.78" />
    <line x1="1" x2="3" y1="12" y2="12" />
    <line x1="21" x2="23" y1="12" y2="12" />
    <line x1="4.22" x2="5.64" y1="19.78" y2="18.36" />
    <line x1="18.36" x2="19.78" y1="5.64" y2="4.22" />
  </svg>
);

const MoonIcon = () => (
  <svg
    aria-hidden="true"
    className="size-full"
    fill="none"
    stroke="currentColor"
    strokeLinecap="round"
    strokeLinejoin="round"
    strokeWidth="2"
    viewBox="0 0 24 24"
  >
    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
  </svg>
);

export default function AnimatedToggleDemo() {
  const [checked, setChecked] = useState(false);

  return (
    <div className="flex items-center gap-8">
      <AnimatedToggle
        checked={checked}
        label="Toggle"
        onChange={setChecked}
        size="lg"
        variant="default"
      />

      <AnimatedToggle
        checked={checked}
        icons={{ on: <SunIcon />, off: <MoonIcon /> }}
        label="Theme toggle"
        onChange={setChecked}
        size="lg"
        variant="icon"
      />
    </div>
  );
}