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