Shadcn.io is not affiliated with official shadcn/ui
Theme Toggle Button
Theme toggle button with animated sun/moon icon transition for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.
Theme Toggle Button preview
A beautiful toggle between sun and moon icons with smooth rotation animation. Click and watch the icons swap with a satisfying spin. This is pure UI—hook it up to your own theme logic or state. Perfect for headers and navbars. The animation is subtle but polished, exactly what users expect from a theme toggle. Built on top of the shadcn Button so every variant and size you already use just works.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this button for you — no copy-paste, no CLI:
use shadcnio to install the theme-toggle-button button into my projectRelated Components
Icon Button
Icon with active state
Copy Button
Clipboard with feedback
Success Button
Success checkmark state
GitHub Stars Button
Live GitHub star count
Underline Button
Growing underline
Arrow Button
Hover slides in arrow
FAQ
Was this page helpful?
Sign in to leave feedback.
Success Button
Button that transforms into a success checkmark when completed for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.
Underline Button
Minimal button with an animated underline that grows from center on hover for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.