Curtain Theme Toggle

Buttons 866

About

A high-end, interactive theme toggle component with a satisfying curtain-style transition animation. Supports standalone icon, full navigation app bar integration, and global Tailwind CSS dark mode syncing.

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

Code

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

Usage.tsx

import { ThemeToggle } from "@/components/ui/curtain-theme-toggle";

export default function Demo() {
  return (
    <div className="flex flex-col items-center justify-center w-full min-h-[400px] gap-4">
       <p className="text-sm opacity-60">Click the button to see the animation.</p>
       
       <div className="bg-white dark:bg-black p-4 rounded-2xl shadow-xl border border-black/5 dark:border-white/10">
          <ThemeToggle variant="icon" defaultTheme="light" duration={600} />
       </div>
    </div>
  );
}