Components
AnimatedThemeToggler — React Theme Toggle Button with Smooth Icon Transitions
A lightweight React component that toggles between light and dark modes with animated sun and moon icons using Framer Motion. It detects and syncs the current theme state with the DOM, supports persistent theme preference via localStorage, and uses the new View Transitions API to animate smooth page background transitions based on the toggle button's position.
Features:
Clean React hooks-based logic
Animated icon transitions using framer-motion
Theme persistence and live updates
View Transitions API clip-path reveal animation
Tailwind CSS compatible styling with customizable classes
Accessible button with ARIA labels
Perfect for modern React/Next.js projects looking to add a polished theme toggle with smooth UI and excellent UX.
Loading preview...
import { AnimatedThemeToggler } from "@/components/ui/animated-theme-toggler"
export default function ThemeSwitchDemo() {
return (
<div className="min-h-screen flex items-center justify-center bg-background transition-colors">
<AnimatedThemeToggler />
</div>
);
}