Confetti Burst

Click-triggered confetti particle explosion with customizable colors and physics.

npx uniqueui add confetti-burst

Preview

🎉 Click me!

Click anywhere on this card for confetti

Usage

import { ConfettiBurst } from "@/components/ui/confetti-burst";

export default function Example() {
  return (
    <div className="flex items-center justify-center p-20 text-white">
      <ConfettiBurst className="rounded-xl p-12 border border-neutral-800 bg-neutral-900/50 hover:border-neutral-700 transition-colors cursor-pointer">
        <div className="text-center">
          <h3 className="text-xl font-bold mb-2">🎉 Click me!</h3>
          <p className="text-neutral-400 text-sm">Click anywhere on this card for confetti</p>
        </div>
      </ConfettiBurst>
    </div>
  );
}

Props

Prop	Type	Description
`children`	`React.ReactNode`	Trigger element wrapped by the particle generation effect zone.
`className`	`string`	Styling configurations for the interaction wrapper logic container.
`particleCount`	`number`	Quantity multiplier defining how many fragments evaluate per execution.
`colors`	`string[]`	Array defining hex code palettes defining sequential particle rendering.
`spread`	`number`	Radiant measurement indicating geometric angle variance for throwing trajectories.
`duration`	`number`	Timer limit capping maximum gravity simulation lifetime.