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