Components
Loading preview...
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.
@arunachalam0606
npx shadcn@latest add https://21st.dev/r/arunachalam0606/animated-theme-toggle-buttonimport { 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>
)
}