Preview
Props
Install
npx shadcn@latest add @evilbuttons/shiny-buttonUsage
import ShinyButton from "@/components/evil-buttons/shiny-button";
export function ButtonDemo() {
return <ShinyButton onClick={() => console.log("Shiny")}>Launch</ShinyButton>;
}Variants
Slow glint
A longer shineDuration gives a lazier, more luxurious sweep.
Props
The component spreads native button props and forwards its ref to the button.
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | The button label or content. |
shineDuration | number | 650 | Milliseconds the glint takes to sweep across on click. |
className | string | - | Extra classes passed to the button. |
Good to know
- No animation library: the glint uses the Web Animations API.
- Glint is skipped under
prefers-reduced-motion.