Components
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.
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>
);
}