Click Burst React component
A wrapper that makes anything celebrate a click: sparks, confetti, hearts, expanding rings or stars burst from the exact point you clicked, drawn on a canvas that spills past the element's edges and stops when the last particle fades.
About the Click Burst component
Click Burst adds a little celebration to a click. Wrap a button — or any area — in it, and particles burst out from exactly where you clicked: bright sparks, tumbling confetti, rising hearts, expanding rings or stars, flying past the element's edges before they fade.
It keeps your button's own click handler and only draws while particles are in the air, so it costs nothing the rest of the time. Keyboard clicks burst from the centre, and reduced-motion settings turn it off.
When to use it
Use it on likes, add-to-cart and 'copy' buttons, reward and completion moments, game UI, or any action that deserves a small 'yes!'.
Save it for actions that matter; a burst on every button quickly stops feeling special.
Installation
Add the Click Burst component to your project with the shadcn CLI. It lands in components/click-burst.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/click-burstOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<ClickBurst /> accepts 7 props (required ones are marked *). It also accepts the usual <span> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| children* | React.ReactNode | — |
| shape | "sparks" | "confetti" | "hearts" | "rings" | "stars" | "sparks" |
| colors | string[] | DEFAULT_COLORS |
| count Particles per click. | number | 18 |
| spread How far particles fly, in px. | number | 90 |
| fromCenter Burst from the centre instead of the click point (keyboard clicks always use the centre). | boolean | false |
| disabled | boolean | false |
- children*React.ReactNode
- shape"sparks" | "confetti" | "hearts" | "rings" | "stars"Default: "sparks"
- colorsstring[]Default: DEFAULT_COLORS
- count
Particles per click.
numberDefault: 18 - spread
How far particles fly, in px.
numberDefault: 90 - fromCenter
Burst from the centre instead of the click point (keyboard clicks always use the centre).
booleanDefault: false - disabledbooleanDefault: false
npm dependencies
Installed for you by the shadcn CLI.
Click Burst FAQ
- Which shapes are there?
- sparks, confetti, hearts, rings and stars. Set colors to any list of CSS colours; particles take them in turn.
- Does it change what my button does?
- No. Your button's onClick still runs first; the burst is drawn on top. If your handler calls preventDefault, no burst is drawn.
- Where does the burst come from?
- From the click point. Set fromCenter to always burst from the middle, which suits small buttons; keyboard clicks always use the middle.
- Can particles leave the element?
- Yes. The canvas reaches 140px past the element on every side, so make sure no parent clips it with overflow hidden if you want the full burst.
