ConfettiBurst

A burst of confetti from wherever a button is clicked.

Installation

bash
npx shadcn@latest add https://www.rad-ui.com/r/confetti-burst.json

React
import ConfettiBurst from "@/components/fx/confetti-burst"

<ConfettiBurst><button onClick={ship}>Ship it</button></ConfettiBurst>

Confetti is aria-hidden, ignores pointer events and is removed after about a second.
Keyboard activation bursts from the centre.
Pair it with a real status message for what happened; confetti alone says nothing to a screen reader.
prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) shows no confetti.

Prop	Type	Default	Description
children	ReactNode	—	Usually a button.
pieces	number	28	Pieces per burst.
colors	string[]	pink, sky, yellow, violet, green	Confetti colours.