Animated Theme Toggle Button

A modern React component that lets users switch between light and dark color modes with a visually engaging animated transition. This button supports both horizontal and vertical reveal animations using the View Transitions API for ultra-smooth theme changes. The icon updates instantly to show the current mode (sun for light, moon for dark), and the UI state is synchronized across the app to reflect user preference. Built with accessibility and performance in mind, the component works seamlessly in any Tailwind CSS + Framer Motion project, and is easy to customize for diagonal or cross-line transitions. Features: Animated theme transitions (horizontal, vertical, extendable for more) Sun & moon icon with Framer Motion effects Accessible and focus-friendly Synchronizes with global theme state Easy to plug into any React/Next.js app Perfect for clean, user-friendly dark mode toggles in modern web apps.

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

import { AnimatedThemeToggleButton } from "@/components/ui/animated-theme-toggle-button"

export default function ThemeTransitionDemo() {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen gap-10 bg-background transition-colors">
      <div className="flex flex-col items-center">
        <AnimatedThemeToggleButton type="horizontal" />
        <span className="mt-2 text-xs">Horizontal Theme Transition Animation</span>
      </div>

      <div className="flex flex-col items-center">
        <AnimatedThemeToggleButton type="vertical" />
        <span className="mt-2 text-xs">Vertical Theme Transition Animation</span>
      </div>
    </div>
  )
}