A celebratory burst of brand-coloured confetti that flies up, flutters as it falls and fades, for sign-ups, purchases and wins.
Customize
Usage
import { ConfettiButton } from "@/components/motionkit/confetti-button";
<ConfettiButton onClick={claim}>
Claim your reward
</ConfettiButton>Motion
The exact curves this component runs, plotted with Motion's own maths.
Confetti
Click
Completing a purchase, finishing onboarding, claiming a reward, reaching a milestone: moments worth celebrating.
A click creates a full-window canvas, only for as long as the confetti lasts, and fires pieces from the button's centre in an upward cone. Each frame applies air resistance, gravity and a sideways flutter; squashing each piece along one axis as it spins makes flat paper look like it's turning in the air. Pieces fade as they fall, and when the last one has gone, the canvas removes itself. Quick clicks add to the same burst.
| Prop | Type | Default | Description |
|---|---|---|---|
| colors | string[] | — | Confetti colours, picked at random. |
| pieces | number | 90 | Pieces per burst. |
| ...props | ButtonHTMLAttributes | — | Anything a <button> accepts. Call preventDefault in onClick to skip the burst. |
How we audit: the WCAG 2.2 animation checklist and respecting reduced motion in React.
Yes. The file starts with "use client", so you can import it straight into a Server Component page or layout. It works in Vite as is, and in Astro as a React island.
Only the motion package, beside React and Tailwind CSS v4. There is no MotionKit package and no Tailwind config to add.
Yes, with MotionKit Plus. Add the @motionkit registry and your personal token to components.json (the snippet is on your account page), then run npx shadcn@latest add @motionkit/confetti-button. It saves the file to components/motionkit and installs its dependencies.
Confetti Button is part of MotionKit Plus (£12 / $15 / €14 a month or £96 / $120 / €112 a year). The live preview and playground are free to explore; Plus unlocks its source code, every customisation control and commercial use.
With reduced motion on, no confetti is fired; your onClick still runs.
Customize
Usage
import { ConfettiButton } from "@/components/motionkit/confetti-button";
<ConfettiButton onClick={claim}>
Claim your reward
</ConfettiButton>Motion
The exact curves this component runs, plotted with Motion's own maths.
Confetti
Click
The live preview is free to explore. Plus unlocks the source for Confetti Button and every other premium component.