Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

Previous: Shimmer Button
Next: Shockwave Button

Shine Button

Sleek button with a diagonal light sweep on hover—that premium shine effect for React.

You know that satisfying gleam when light catches a polished surface? That's what this button does on hover. A diagonal shine sweeps across, giving your CTAs that Apple-level polish. It's subtle enough for serious apps but eye-catching enough to boost clicks. Drop it on your pricing page "Upgrade" button or your hero's main CTA. Works great on both dark and light themes—the shine adapts beautifully.

Shine Button preview

Loading...
Scroll to load preview

Installation

Install
Pro button

Glow Border Button

Rotating gradient glow

Liquid Button

Fluid fill animation

Ripple Button

Material Design ripple

Corner Accent Button

Animated corners

Flip Button

3D flip animation

Magnetic Button

Cursor attraction

FAQ

Shimmer Button

Button with flowing shimmer effect like light on liquid metal for React.

Shockwave Button

Button that emits a single powerful shockwave ring on click for React.