design-infraReport a problem or share feedback← Catalog
Theme Toggler
curatedtheme-awarefreemagicui/animated-theme-toggler
Theme toggle with View Transitions and animated clip-path masks (circle, polygons, star), optional viewport-centered origin.
$
npx shadcn@latest add @magicui/animated-theme-togglernpm deps: lucide-react
Our notes
Light/dark toggle with a View Transitions clip-path reveal. Colourless (icons use currentColor). Uncontrolled it toggles <html class=dark> + localStorage itself; with next-themes pass theme/onThemeChange instead.- Source
- Magic UI
- Kind
- component
- Categories
- input
- Use as
- drop-in — replaces your component
- Applies to
- buttonnavigation
- Motion
- on press, state · medium · css · low cost · ignores reduced motion
- Licence
- MIT (magicuidesign/magicui). Magic UI Pro templates are a separate paid product — not catalogued.
- Live demo
- magicui.design
- Docs
- magicui.design
Similar
Compare all 4 →- Vector Editor Toolbarsmoothui/vector-editor-toolbarA Figma-style floating vector toolbar with tool selection, nested flyouts and a contextual properties bar.
- Gooey Inputaceternity/gooey-inputA search-style input that expands with a gooey SVG filter and shared layout animation
- Button: upload, user, avataroriginui/comp-125Button variant (comp-125) — button, upload, user, avatar, profile, image.