# Theme Switch Button

> The ⁠ThemeSwitchButton is an animated icon button designed to toggle the application’s theme between light and dark modes. When pressed, the icon smoothly transitions (e.g., sun to moon), providing visual feedback to the user. It is customisable, accessible, and ideal for prominent placement in user interfaces where theme switching is required.

- Author: [KainXu](https://21st.dev/@xubohuah)
- License: mit
- npm dependencies: lucide-react
- Live preview: https://21st.dev/@xubohuah/components/theme-switch-button

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/xubohuah/theme-switch-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