Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

Previous: Text Reveal Button
Next: Tilt Button

Theme Toggle Button

Theme toggle button with animated sun/moon icon transition for React.

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.

Theme Toggle Button preview

Loading...
Scroll to load preview

Installation

Install
Pro button

Icon Button

Animated icon button

Copy Button

Clipboard copy with feedback

Morph Button

Morphs between states

Flip Button

3D flip animation

Pulse Button

Pulsing attention ring

Ghost Button

Transparent with fill

FAQ

Text Reveal Button

Button with text that reveals with a sliding mask effect on hover for React.

Tilt Button

Button with 3D tilt effect that follows your cursor for React.