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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Theme Switch Button to your project and fits it to your theme.

'use client'

import * as React from "react"
import { ThemeSwitch } from "@/components/ui/theme-switch-button"

export function ThemeSwitchDemo() {
  return (
    <div className="flex justify-center items-center py-8">
      <ThemeSwitch />
    </div>
  )
}

export { ThemeSwitchDemo }