Theme Toggle
Navigationinline sandboxA theme toggle button with a stunning clip-path view transition animation. The theme change expands from the button in a smooth circular reveal effect.
theme toggle
dark mode toggle
view transition
clip-path animation
theme switcher
Preview
Requires next-themes to be configured in your app.
The clip-path animation uses View Transitions API with graceful fallback for unsupported browsers.
The CSS is self-contained - won't conflict with your existing styles.
Installation
Use the shadcn CLI to install this component:
npx shadcn@latest add https://messyui.dev/r/theme-toggle.jsonProps
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | undefined | Additional CSS classes to apply to the toggle button |