# Animated Theme Toggle Button

> A modern React component that lets users switch between light and dark color modes with a visually engaging animated transition. This button supports both horizontal and vertical reveal animations using the View Transitions API for ultra-smooth theme changes. The icon updates instantly to show the current mode (sun for light, moon for dark), and the UI state is synchronized across the app to reflect user preference. Built with accessibility and performance in mind, the component works seamlessly in any Tailwind CSS + Framer Motion project, and is easy to customize for diagonal or cross-line transitions.  Features:  Animated theme transitions (horizontal, vertical, extendable for more)  Sun & moon icon with Framer Motion effects  Accessible and focus-friendly  Synchronizes with global theme state  Easy to plug into any React/Next.js app  Perfect for clean, user-friendly dark mode toggles in modern web apps.

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

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/arunachalam/animated-theme-toggle-button?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