Confetti

Stable

Celebrate with animated confetti particles! 🎉

Import

import { Confetti } from '@brutal-ui/react';

Basic Usage

const [showConfetti, setShowConfetti] = useState(false);

<Button
  onClick={() => {
    setShowConfetti(true);
    setTimeout(() => setShowConfetti(false), 3000);
  }}
>
  Celebrate!
</Button>

{showConfetti && <Confetti active={true} />}

Customization

Control duration, particle count, and animation speed:

<Confetti 
  active={true}
  duration={5000}
  particleCount={150}
/>

Use Cases

✅

Successful Actions

Form submission, account creation, checkout completion

🎯

Achievements

Milestone reached, level up, streak completed

🎊

Special Events

Birthday, anniversary, winning a contest

Props

Prop	Type	Default	Description
active	boolean	false	Trigger confetti animation
duration	number	3000	Duration in milliseconds
particleCount	number	100	Number of particles