# Motion Theme Toggle Transition

App header toggle that reveals the dark theme with a circle growing from the button.

- id: `motion-theme-toggle-transition`
- Page: https://agentic-ui-kit.com/components/motion-theme-toggle-transition
- Live preview: https://agentic-ui-kit.com/live/component/motion-theme-toggle-transition

## Install

```bash
agentic-ui add motion-theme-toggle-transition
npx shadcn@4.17.0 add @agentic-ui/motion-theme-toggle-transition
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** theme-toggle, circular-wipe-from-toggle, diagonal-wipe-variant, fade-variant, view-transitions-api, next-themes-compatible, aria-pressed-toggle, reduced-motion-fallback, informative-state-preservation
- **Intents:** configure, navigate
- **Suits domains:** saas, settings, ai-workspace, devtools, marketing, knowledge
- **Interaction:** click, keyboard-navigation
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** App header toggle that reveals the dark theme with a circle growing from the button, Marketing site header where the new theme sweeps in diagonally from the toggle's corner, Documentation header with a short cross-fade between light and dark
- **Avoid when:** The product needs a light, dark and system choice (use a theme settings control), Pages with embedded video or iframes where a full-page snapshot swap would flash, Frequent programmatic theme changes (the wipe is meant for a deliberate click)
- **Preserve when adapting:** aria-pressed-for-dark-theme, wipe-origin-at-the-toggle, instant-swap-when-motion-is-off, controlled-theme-and-onthemechange
- **Replace when adapting:** labels, icons, shape
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react, react-dom
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion