Shiny Button

Interactive button with spotlight effect that follows mouse cursor and highlights borders on hover.

Installation

npx shadcn@latest add https://scrollxui.dev/registry/shiny-button.json

import { ShinyButton } from "@/components/ui/shiny-button";

<ShinyButton size="lg">
  Button
 </ShinyButton>

Fixed a critical issue causing “Rendered fewer hooks than expected” due to inconsistent hook execution paths.
Added proper touch detection to prevent unwanted hover effects on mobile.
Refined gradient reset and layering for consistent visuals across browsers.

Interactive button with spotlight effect that follows mouse cursor and highlights borders on hover.

Property	Type	Default	Description
`size`	"default" \| "sm" \| "lg" \| "icon"	`"default"`	Defines the button size and padding.
`asChild`	boolean	`false`	If true, renders a Radix Slot instead of a native button element.
`gradientFrom`	string	`"#9E7AFF"`	Starting color of the shiny gradient.
`gradientTo`	string	`"#FE8BBB"`	Ending color of the shiny gradient.
`gradientOpacity`	number	`0.8`	Controls transparency of the shiny gradient overlay.
`gradientAngle`	number	`0`	Initial angle (in degrees) of the shiny gradient direction.
`className`	string	`—`	Custom CSS classes applied to the base gloss layer. Overrides default background.
`children`	ReactNode	`—`	Button label or nested elements (text, icons, etc.).
`...props`	button props	`—`	Supports all standard button attributes and events.