We are live on DevHunt: tool of the week contest

check it out

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

PropTypeDefault
animation
"morph""circle""diamond""wipe""flip"
diamond
origin
"button""center""top-left""top-right""bottom-left""bottom-right""top""bottom""left""right"
button
durationnumber500
morphRaysnumber12