Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProAnimated theme toggle using the View Transitions API with configurable clip-path shapes and origin.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use variant to change the clip-path shape of the view transition (circle, square, triangle, diamond, rectangle, hexagon, or star):
Expand from the viewport center instead of the button with 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.