Interactive React buttons with motion built in, for the moments where a call to action should feel alive.
7 components · free and MIT-licensed · install with the shadcn CLI
Every button in the library, with everything each one pulls in.
The ConfettiButton component throws a burst of confetti from its own centre when pressed, measuring the button's position at click time so the pieces come from the thing the reader actually pressed.
canvas-confettimotion
The LoadingButton component runs one async action and reports on it in place: it swaps to a spinner while the request is open, confirms with a tick when it resolves, and returns to its resting label on its own.
lucide-reactmotion
The MagneticButton component drifts toward the pointer as it approaches and springs back when the pointer leaves, making calls to action feel responsive before they are even clicked.
motion
The RainbowButton component rings a call to action with a band of colour that travels around it, drawn from the project's own chart tokens so the palette re-themes with the rest of the app.
motion
The RippleButton component sends a ripple out from the exact point it was pressed, sized to reach the button's farthest corner so the whole surface floods however near the edge you click.
motion
The ShimmerButton component sweeps a band of light across its face on a loop, giving a call to action a slow pulse of movement without asking the reader to hover, click or scroll first.
motion
The SubscribeButton component is an interactive button for subscription actions, modelled on the YouTube subscribe animation, with customisable styles and timings.
lucide-reactmotionnext-themes
Every component here is installable with the shadcn CLI, which also resolves its npm dependencies.
npx shadcn@latest add https://uibeats.com/r/confetti-button.json