Confetti Button

Button that fires a confetti burst on click

A celebratory button that launches a confetti burst from its center when clicked. Uses canvas-confetti under the hood with configurable particle count and spread.

Preview

One task left

9 of 10 launch checks passed.

Installation

Install the component using the CLI.

npx shadcn@latest add https://rohan.run/r/confetti-button.json

Usage

Import the component:

import { ConfettiButton } from "@/components/rohan/confetti-button"

Use it in your code:

<ConfettiButton>Celebrate</ConfettiButton>

Props

PropertyTypeDefaultDescription
childrenReactNode"Celebrate"Button label or content.
particleCountnumber100Number of confetti particles per burst.
spreadnumber70Spread angle of the burst in degrees.
classNamestringOptional CSS classes for the button.
Components