# Animated Theme Toggler

> AnimatedThemeToggler — React Theme Toggle Button with Smooth Icon Transitions  A lightweight React component that toggles between light and dark modes with animated sun and moon icons using Framer Motion. It detects and syncs the current theme state with the DOM, supports persistent theme preference via localStorage, and uses the new View Transitions API to animate smooth page background transitions based on the toggle button's position.  Features:  Clean React hooks-based logic  Animated icon transitions using framer-motion  Theme persistence and live updates  View Transitions API clip-path reveal animation  Tailwind CSS compatible styling with customizable classes  Accessible button with ARIA labels  Perfect for modern React/Next.js projects looking to add a polished theme toggle with smooth UI and excellent UX.

- Author: [Arunachalam](https://21st.dev/@arunachalam)
- License: unknown
- npm dependencies: lucide-react, framer-motion
- Live preview: https://21st.dev/@arunachalam/components/animated-theme-toggler

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/arunachalam/animated-theme-toggler?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt