Theme Toggle
An animated light/dark mode switch using View Transitions API.
Preview
Interactive Preview
Animations
Origin
Installation
Usage
tsx
import { ThemeToggle } from "@/components/theme-toggle"
export default function Header() {
return (
<ThemeToggle
animation="circle"
duration={600}
origin="center"
/>
)
}Dependencies
lucide-reactnext-themes
Props
| Prop | Type | Default |
|---|---|---|
| animation | "morph""circle""diamond""wipe""flip" | diamond |
| origin | "button""center""top-left""top-right""bottom-left""bottom-right""top""bottom""left""right" | button |
| duration | number | 500 |
| morphRays | number | 12 |