Animated Theme Toggler
A theme toggle button that transitions between light and dark modes with a circular reveal animation.
Click to see the effect
Installation
npx shadcn-vue@latest add https://raya-ui.com/registry/animated-theme-toggler.jsonOr manually:
npm install lucide-vue-next clsx tailwind-mergeNote: This component relies on the View Transitions API. It will gracefully degrade to a standard toggle on browsers that don't support it.
Examples
Customization
You can customize the appearance using standard Tailwind classes.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| theme | string | dark | Current theme |
| duration | number | 400 | Duration of the clip-path animation in milliseconds. |
| class | string | '' | Custom classes for the button element. |
Emits
| Event | Payload | Description |
|---|---|---|
| update:modelValue | any | Fired when theme changes. |