Shadcn.io is not affiliated with official shadcn/ui
Shine Button
Sleek button with a diagonal light sweep on hover—that premium shine effect for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.
Shine Button preview
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. 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 shine-button button into my projectRelated Components
Shimmer Button
Animated shimmer ring
Spotlight Button
Cursor-following light
Gradient Button
Shifting gradient bg
Glow Border Button
Continuous rotating glow
Magnetic Button
Cursor magnetic pull
Neon Button
Glowing neon halo
FAQ
Was this page helpful?
Sign in to leave feedback.
Shimmer Button
Button with a flowing shimmer border around a solid primary core for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.
Slide To Confirm Button
Pill-shaped track with a draggable handle that fires onConfirm when slid across, iOS-native style, for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.