Components

Theme Toggle

A beautiful, curtain-style dark/light mode toggle component. It features a satisfying animation that pulls a curtain across the screen when switching themes.

Preview

Click the button below to see the animation

Note: This toggle will change the theme of the entire documentation site, demonstrating its global effect.

Installation

We use the Shadcn CLI to distribute components. You can add this component directly to your project using the following command:

npx shadcn@latest add https://component.fatihunal.dev/r/theme-toggle.json

Usage

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

export default function App() {
  return (
    <div>
      <ThemeToggle variant="default" />
    </div>
  );
}

Props

Prop	Type	Default	Description
variant	"default" \| "appbar"	"default"	The visual style of the toggle.
defaultTheme	"light" \| "dark"	"light"	Initial theme state.
duration	number	600	Animation duration in milliseconds.