Horizontal Theme Wipe Toggle

HorizontalThemeWipeToggle — Animated React Theme Switch Button with Vertical Line Reveal Switch between light and dark modes with a visually striking page-wide vertical wipe animation using the native View Transitions API. This button supports both left-to-right and right-to-left transitions for a buttery-smooth, full-page theme swap. Built for React with zero context dependencies and perfect integration with Tailwind and Framer Motion for all icon/label UI.

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

import { HorizontalThemeWipeToggle } from "@/components/ui/theme-wipe-toggle";

export default function ThemeSwitchDemo() {
  return (
    <div className="flex flex-col gap-4 items-center">
      <HorizontalThemeWipeToggle direction="left" />
      <span className="text-xs">Left → Right</span>
      <HorizontalThemeWipeToggle direction="right" />
      <span className="text-xs">Right → Left</span>
    </div>
  );
}