Animated Theme Toggler

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.

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

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