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.
Add it with the CLI, open it in v0, or copy the source into your project.
Adds the component and installs its dependencies for you.
npx shadcn@latest add https://uibeats.com/r/confetti-button.jsonEverything Confetti Button accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
| children (required) | React.ReactNode | No default | Button label or content |
| particleCount | number | 90 | How many pieces each burst throws |
| spread | number | 70 | How wide the burst fans out, in degrees |
| colors | string[] | 5 preset hexes | Hex colours the pieces are drawn from. canvas-confetti reads hex only |
| className | string | '' | Additional CSS classes for styling |
Required.
The burst starts at the button, not the top of the screen.