Confetti is the only component in a product whose entire purpose is that it is unnecessary. It marks a moment as worth marking, and the reason it works is scarcity: the first time it fires it is a small gift, and the fourth time it is a delay between the reader and the next screen.
5 public components on 21st have "confetti" in the name.
The components
Confetti by dillionverma is the standard burst, described by its author as best used to delight users when something good happens, and Confetti by mlshv is the simple version.
ConfettiButton by Ruixen UI attaches the burst to a press, Confetti by motiondotdev is the particle-explosion take, and Confetti Background by diriktv is the ambient version - which is the one to be careful with, since ambient confetti is decoration rather than a signal and loses the meaning entirely.
When to fire it
The test: would the reader tell someone about this? A first successful deploy, a completed onboarding, a milestone reached, a payment that unlocks something. Those are moments.
A saved form is not a moment. A copied link is not a moment. Neither is anything that happens more than a handful of times, and firing on a repeated action is how a delight becomes a tic.
One rule that costs nothing: fire it once per achievement rather than once per render. A celebration that replays when the reader navigates back is a bug that reads as mockery.
The three technical notes
It must not block anything. The canvas sits over the page with pointer-events: none, so the reader can keep working through it. A celebration that eats a click is a celebration that cost something.
It must clean itself up. A canvas and a frame loop that outlive the burst are a leak. Stop the loop when the particles are done and remove the element, which is the same discipline the particles guide applies to any canvas animation.
Reduced motion means no confetti. This is the clearest case in the whole animation family: a full-screen burst of moving objects is exactly what prefers-reduced-motion exists to prevent, and there is no reduced version worth shipping. Show the message and skip the animation.
The alternative that is often better
A moment can be marked without particles. A number that counts up, a checkmark that draws itself, a card that settles into place, a single line of copy that acknowledges what happened by name: "Deployed. That is your first one."
All of those are quieter, none of them need a canvas, and the last one is the only option that still works for a reader who has turned motion off - which the empty state guide makes the same case for in the other direction: the copy carries more than the picture.
Where else to look
The honest list, because the answer is not always us:
| Source | Best for | Trade-off |
|---|---|---|
| canvas-confetti | The physics, in a small library everyone uses | A dependency for one moment |
| A CSS keyframe burst | A dozen elements, no canvas, no library | Less convincing physics |
| A written line of copy | Working for everyone, including reduced motion | No spectacle, which is sometimes right |
| 21st | Bursts, button-attached and ambient variants | Quality varies by author, so preview before you take it |
Taking one
Every component page has a live preview and the code. Installing goes through the shadcn CLI against our registry:
That key comes from your 21st account, and installs require a membership. Set API_KEY_21ST once in your shell and the command works for anything in the catalogue.
Frequently asked
- When should confetti fire?
- When the reader would tell someone about what just happened: a first deploy, a completed onboarding, a milestone, a payment that unlocks something. Not on a saved form or a copied link, and never on anything that happens more than a handful of times.
- What does a confetti implementation need technically?
- pointer-events none so it never eats a click, cleanup that stops the frame loop and removes the canvas when the burst ends, and a guard so it fires once per achievement rather than once per render. A celebration that replays on back-navigation reads as mockery.
- What should confetti do under reduced motion?
- Not fire. A full-screen burst of moving objects is the clearest case the preference exists for, and there is no reduced version worth shipping. Show the message and skip the animation entirely.
- What are the alternatives to confetti?
- A number counting up, a checkmark that draws itself, a card settling into place, or one line of copy naming what happened. The copy is the only one that still works for a reader with motion turned off, and it often lands harder anyway.