Shadcn.io is not affiliated with official shadcn/ui
Spotlight Button
Button with a soft light that follows your cursor on hover for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.
Spotlight Button preview
Move your mouse across this button and watch the light follow. A soft radial glow tracks your cursor in real-time, like a spotlight on a stage. It's that premium, almost tactile effect you see on high-end product sites. The light reveals depth and makes the button feel responsive before you even click. Subtle enough for enterprise apps, impressive enough for creative portfolios. Works beautifully on both light and dark themes—the glow adapts automatically. 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 spotlight-button button into my projectRelated Components
Shine Button
Diagonal light sweep
Magnetic Button
Cursor magnetic pull
Gradient Button
Shifting gradient bg
Neon Button
Glowing neon halo
Shimmer Button
Animated shimmer ring
Depth Button
Tactile 3D press
FAQ
Was this page helpful?
Sign in to leave feedback.
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.
Stitch Button
Button with a stitched dashed inner border and double inner shadows for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.