Toggle Theme

Buttons 210

About

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.

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

Code

How Toggle Theme is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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>
	);}