Components
Loading preview...
VerticalThemeWipeToggle — Top/Bottom Reveal Animated Theme Switch A modern React theme toggle button offering a visually dramatic full-page transition using the View Transitions API. Seamlessly reveal your dark or light mode with a vertical wipe animation that moves from either the top or bottom of the screen, creating a cinematic experience for users. No theme context or extra dependencies needed—this pure DOM implementation plugs into any Tailwind or Framer Motion app with ease. Features: Directional vertical animation: top→bottom or bottom→top with a simple prop Hardware-accelerated, native-page transitions (View Transitions API) Compatible with React, Tailwind CSS, and motion UI No next-themes or global context required—just DOM and localStorage Accessible, fast, and flicker-free Easily extendable for line/diagonal/horizontal effects Use Cases: Perfect for dashboards, admin panels, landing pages, or any web app wanting a premium-feeling, full-screen theme swap effect.
@arunachalam0606
npx shadcn@latest add https://21st.dev/r/arunachalam0606/vertical-theme-wipe-toggleimport { VerticalThemeWipeToggle } from "@/components/ui/vertical-theme-wipe-toggle";
export default function ThemeSwitchDemo() {
return (
<div className="flex flex-col gap-4 items-center">
<VerticalThemeWipeToggle direction="top" />
<span className="text-xs">Top → Bottom</span>
<VerticalThemeWipeToggle direction="bottom" />
<span className="text-xs">Bottom → Top</span>
</div>
);
}