Shiny Button

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

Installation

npx shadcn@latest add @scrollxui/shiny-button

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

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

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.