How to Add Confetti in React (Free Celebration Effect)

Why Add a Confetti Effect to Your React App?

Confetti animations are one of the most effective ways to celebrate user milestones — completing a purchase, finishing onboarding, hitting a goal, or submitting a form. A well-timed confetti burst communicates success visually and creates a moment of delight that users remember long after they close the tab.

In the React ecosystem, adding a confetti effect used to require heavy third-party dependencies or complex canvas logic. Today, with Empire UI's free component library, you can drop in a polished, performant confetti animation with just a few lines of code — no bloated packages required.

Beyond celebration flows, confetti can reinforce gamification mechanics: streak completions, badge unlocks, leaderboard climbs. The psychological impact of a small visual reward is well documented in UX research, and the implementation cost is minimal when you have the right components at hand.

Installing and Setting Up Empire UI

Before adding a confetti react effect, make sure Empire UI is set up in your project. Empire UI is a 100% free React component library with 40 visual styles — from glassmorphism to neobrutalism — and includes animated components like particles, Aurora backgrounds, and confetti out of the box.

Install Empire UI via npm or yarn: ``bash npm install empire-ui # or yarn add empire-ui ` For Tailwind-based projects, add the Empire UI preset to your tailwind.config.js` to enable all utility classes used by the components. Check the full documentation on the tools page for the exact configuration snippet.

Once installed, all components are tree-shakeable, so you only bundle what you actually import. This keeps your production build lean even as you adopt more components over time.

Basic Confetti Component Usage

The <Confetti /> component from Empire UI is controlled via a trigger boolean prop. Set it to true to fire the burst, and the animation handles everything else — particle count, colors, physics, and cleanup — automatically.

Here is the simplest working example: ``tsx import { useState } from 'react'; import { Confetti } from 'empire-ui'; export default function SuccessPage() { const [celebrate, setCelebrate] = useState(false); return ( <div className="flex flex-col items-center gap-4 p-8"> <Confetti trigger={celebrate} /> <h1 className="text-2xl font-bold">Payment Complete!</h1> <button className="px-6 py-2 bg-violet-600 text-white rounded-lg" onClick={() => setCelebrate(true)} > Celebrate </button> </div> ); } ``

When trigger flips to true, the component fires a burst of colored particles from the center of the viewport. After the animation completes (roughly 3 seconds by default), it cleans itself up without leaving orphan DOM nodes — no memory leaks, no lingering canvas elements.

For forms or checkout flows, you can hook trigger directly to a submission callback: set celebrate to true inside your onSuccess handler and the confetti fires the moment the server responds with a 200.

Customising the Confetti Effect

Empire UI's <Confetti /> component exposes a rich set of props so you can tailor every aspect of the animation to your design system. The key customisation props are colors, particleCount, spread, origin, and duration.

``tsx <Confetti trigger={celebrate} particleCount={200} spread={120} colors={['#7c3aed', '#06b6d4', '#f59e0b', '#10b981']} origin={{ x: 0.5, y: 0.4 }} duration={4000} /> ` In this snippet, particleCount sets how many particles launch per burst, spread controls the horizontal dispersion angle in degrees, and origin is a normalized {x, y} coordinate (0–1) relative to the viewport. Setting origin.y to 0.4` launches confetti slightly above center, which looks more natural on most layouts.

For glassmorphic or dark-theme UIs, try metallic accent colors like #e2e8f0, #94a3b8, and #7c3aed to keep the confetti cohesive with your palette. You can browse style-matched color palettes on the glassmorphism page and copy hex values directly into your colors array.

If you want confetti to fire from both sides of the screen (like a stadium cannon effect), render two <Confetti /> instances with origin={{ x: 0, y: 0.6 }} and origin={{ x: 1, y: 0.6 }} and a small delay on the second one using a setTimeout to offset the trigger.

Triggering Confetti on Real Events

The most impactful use of a confetti react effect is tying it to a meaningful user action — not just a demo button. Common real-world triggers include: completing a multi-step form, reaching 100% profile completion, unlocking a feature, or making a first purchase.

Here is a pattern for triggering confetti after a successful async operation: ``tsx import { useState } from 'react'; import { Confetti } from 'empire-ui'; export default function CheckoutButton() { const [loading, setLoading] = useState(false); const [success, setSuccess] = useState(false); const handleCheckout = async () => { setLoading(true); try { await submitOrder(); // your API call setSuccess(true); // fires confetti } finally { setLoading(false); } }; return ( <> <Confetti trigger={success} /> <button onClick={handleCheckout} disabled={loading}> {loading ? 'Processing...' : 'Buy Now'} </button> </> ); } ``

Notice that success only flips to true after the await resolves — this ensures confetti never fires prematurely. You can also combine this with an animated button from Empire UI to give the button itself a press animation before the confetti launches, creating a satisfying two-stage feedback loop.

For accessibility, pair the confetti burst with a non-visual success indicator — an ARIA live region or a toast notification — so users relying on screen readers also receive clear confirmation. Confetti is progressive enhancement: delightful when seen, but the UX should never depend on it.

Performance Tips and Best Practices

Canvas-based confetti is GPU-accelerated and generally very cheap, but a few practices keep it smooth across all devices. First, avoid triggering confetti on rapid repeated clicks — add a disabled flag after the first fire or use a useRef to track whether the animation has already played in the current session.

Second, for mobile users on low-end hardware, consider reducing particleCount to around 80–100. You can detect this with a simple check: ``tsx const isMobile = /Mobi|Android/i.test(navigator.userAgent); <Confetti particleCount={isMobile ? 80 : 200} trigger={celebrate} /> `` This keeps the experience smooth without degrading the visual quality on desktop.

If you are building a highly interactive product, explore the rest of the Empire UI component catalog — components like Aurora backgrounds, shooting stars, and animated tabs are all designed to be as performant as the confetti module, using the same physics-light rendering pipeline. You can also use our MCP server to generate Empire UI components directly inside your AI coding assistant, which speeds up the integration of effects like confetti into larger feature builds.

Finally, consider combining confetti with a custom cursor interaction — for example, switching to a sparkle cursor during the celebration window and resetting it after the duration elapses. Small compound details like this are what separate good UIs from memorable ones.

FAQ

Read next