Animated Theme Switcher Component - Offer users seamless, visually engaging control over light, dark, and system themes.
Built with next-themes and framer-motion, this component enhances UI personalization with elegant transitions.
import { ToggleTheme } from "@/components/ui/toggle-theme"; import { cn } from '@/lib/utils'; export default function DemoOne() { return ( <div className="relative flex min-h-screen w-full items-center justify-center"> <div aria-hidden="true" className={cn( 'absolute inset-0 -z-10 size-full', 'bg-[radial-gradient(color-mix(in_oklab,--theme(--color-foreground/.1)30%,transparent)_2px,transparent_2px)]', 'bg-[size:12px_12px]', )} /> <ToggleTheme /> </div> );}
Part of Efferd — browse the full library on 21st.dev.