Confetti Button

A fun confetti animation component that fires celebratory particles from buttons or anywhere on the page with customizable effects and presets.

Preview

Install the component using the CLI.

1. Install peer dependencies:

npm install canvas-confetti

$npx shadcn@latest add https://ankurz.me/r/confetti-button.json

Import the component:

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

Use it in your code:

<ConfettiButton variant="default">
  🎉 Celebrate!
</ConfettiButton>

<ConfettiButton variant="fireworks">
  Fireworks 🎆
</ConfettiButton>

Property	Type	Default	Description
`variant`	`"default" \| "fireworks"`	`"default"`	The type of confetti effect to trigger.
`children*`	`ReactNode`	`-`	The content to render inside the button.
`className`	`string`	`""`	Additional CSS classes to apply to the button.
`onClick`	`function`	`undefined`	Optional callback function called after confetti fires.