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

Usage

import { ShinyButton } from "@/components/ui/shiny-button";
<ShinyButton size="lg">
  Button
 </ShinyButton>

API Reference

Shiny Button

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

Props

PropertyTypeDefaultDescription
size"default" | "sm" | "lg" | "icon""default"
Defines the button size and padding.
asChildbooleanfalse
If true, renders a Radix Slot instead of a native button element.
gradientFromstring"#9E7AFF"
Starting color of the shiny gradient.
gradientTostring"#FE8BBB"
Ending color of the shiny gradient.
gradientOpacitynumber0.8
Controls transparency of the shiny gradient overlay.
gradientAnglenumber0
Initial angle (in degrees) of the shiny gradient direction.
classNamestring—
Custom CSS classes applied to the base gloss layer. Overrides default background.
childrenReactNode—
Button label or nested elements (text, icons, etc.).
...propsbutton props—
Supports all standard button attributes and events.

Built withby Ahdeetai.