Theme Toggle Transition

Fluid circular reveal theme toggle with smooth icon rotation transitions using View Transitions API.

1import { ThemeToggleTransition } from "@/components/theme-toggle-transition";
2 
3export default function ThemeToggleTransitionDemo() {
4  return (
5    <div className="flex items-center justify-center p-6">
6      <ThemeToggleTransition />
7    </div>
8  );
9}

Installation

bunx --bun shadcn@latest add https://ashutoshtiwari.me/r/theme-toggle-transition.json

Usage

1import { ThemeToggleTransition } from "@/components/theme-toggle-transition"

1<ThemeToggleTransition />

API Reference

Prop	Type	Default	Description
`className`	string	""	Additional CSS classes applied to the toggle button.
`enableSound`	boolean	false	Whether to play audio click feedback on theme switch.