Templates
Components
Special Effects
Animations
Text Animations
Backgrounds
import { AnimatedThemeToggler } from "@/components/ui/animated-theme-toggler"<AnimatedThemeToggler />Use variant to change the clip-path shape of the view transition (circle, square, triangle, diamond, rectangle, hexagon, or star):
<AnimatedThemeToggler variant="star" />Expand from the viewport center instead of the button with fromCenter:
<AnimatedThemeToggler variant="hexagon" duration={600} fromCenter />The preview at the top of this page uses the default circle reveal. Below, each variant has its own isolated preview so you can test one shape at a time.
Pass theme and onThemeChange to keep useTheme() subscribers in sync on toggle. When controlled, the component skips localStorage and lets the parent own persistence.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional classes for the button |
duration | number | 400 | Duration of the theme transition animation in milliseconds |
variant | TransitionVariant | "circle" | Shape used for the view-transition clip-path reveal |
fromCenter | boolean | false | If true, the clip expands from the viewport center instead of the button |
theme | "light" | "dark" | — | Controlled theme value. When set, the parent owns persistence (e.g. next-themes). |
onThemeChange | (theme: "light" | "dark") => void | — | Called on toggle. Pair with theme for controlled usage. |
Export TransitionVariant from the same module when you need typed props or menus.