8 Best React Confetti Libraries, Including canvas-confetti

The quick answer

Quick answer: for most React apps, canvas-confetti is the default: one function call fires a burst, it has no React dependency, and it can switch itself off for people who prefer reduced motion. If you want a component instead of a function, react-confetti draws a full-screen rain you control with props, and react-rewards fires confetti, emoji, balloons or fireworks from a button through a hook. react-confetti-explosion is the CSS option with no canvas, js-confetti is the zero-dependency choice with emoji confetti, and tsParticles covers cannons, explosions and parades when you need presets. For React Native, react-native-fast-confetti is the maintained pick. Release dates below come from each package's npm registry entry, checked in November 2026.

How we picked these libraries

Every library here is open source, installs from npm and was checked against its own README and registry entry. We kept packages with a release in roughly the last two years, and we flag the one exception, react-canvas-confetti, because its last release was in March 2024. We did not include download counts, GitHub stars or bundle sizes, since those change weekly and are easy to misquote.

Confetti is a small feature, but it touches three things that matter: performance on low-end phones, accessibility for people who get motion sick, and server rendering in frameworks such as Next.js. Those three points come up in every section below.

React confetti libraries compared

1. canvas-confetti

Who it is for: anyone who wants a burst of confetti on a click, a signup or a finished checklist, with the least code.

Install: npm install canvas-confetti, then call confetti() inside an event handler or a useEffect.

Strengths: canvas-confetti takes one options object with particle count, angle, spread, gravity, drift, colors, origin and scale. It supports square, circle and star shapes, custom SVG path shapes and emoji through shapeFromText. confetti.create lets you draw on your own canvas and render in a web worker, and the disableForReducedMotion option turns it off for users who set that preference. It returns a Promise when the animation finishes, and confetti.reset() clears it.

Limits: it is not a React component, so you manage when it fires yourself. The README notes it is a client-side module that will not run in Node, so in Next.js call it only from client code. TypeScript types come from the separate @types/canvas-confetti package.

2. react-confetti

Who it is for: pages that celebrate with confetti across the whole screen, such as a "you upgraded" screen or a completed onboarding.

Install: npm install react-confetti

Strengths: react-confetti is a component you render with width and height props. You can set the number of pieces, wind, gravity, friction, opacity, colors and the area confetti starts from. The recycle prop keeps spawning confetti after the first batch, so you can switch between a short burst and a continuous rain, and drawShape lets you draw your own particle on the canvas.

Limits: the README recommends passing width and height yourself, since the defaults do not respond to resize. It is built for falling confetti, not a burst from a single button. There is no reduced motion prop in the README, so check the user's preference before you render it.

3. react-rewards

Who it is for: product teams that want a small reward on a specific action, such as a like, a saved item or a completed task.

Install: npm install react-rewards (React 18 or later, ESM only).

Strengths: react-rewards gives you a useReward hook that takes a ref to the element the burst should start from and an effect. The effects are confetti, emoji, balloon, firework and pop. It draws with WebGL2 where it can and falls back to Canvas 2D, and its README says it stays quiet for people who prefer reduced motion and can be imported on the server, because nothing touches window until a burst fires. Version 3 shipped in October 2026, with 3.2.0 on November 3.

Limits: it needs React 18 or later and is ESM only. The README says only the latest major version gets fixes, so plan to upgrade along with it.

4. react-confetti-explosion

Who it is for: teams that would rather not add a canvas to the page at all.

Install: npm install react-confetti-explosion

Strengths: react-confetti-explosion animates with CSS. Mounting the component fires one explosion, and you set particle count, particle size, duration, force, spread and colors, with an onComplete callback at the end. Version 3 removed its styling dependency and renders nothing when there is no browser window, which helps with server rendering.

Limits: mounting and unmounting is entirely up to you, as the README says. The default height of 120vh may not suit every layout, and the README suggests staying under 400 particles for performance.

5. js-confetti

Who it is for: teams that want the smallest dependency footprint and emoji confetti out of the box.

Install: npm install js-confetti

Strengths: js-confetti uses no dependencies, works without configuration and includes TypeScript typings. addConfetti accepts emojis, colors, radius and count, addConfettiAtPosition fires from a point such as the mouse position, and the Promise it returns resolves when the confetti has left the screen. Speed adapts to screen width.

Limits: it is a class, not a React component, and creating it adds a canvas to the page, so create it once and keep it in a ref. Its README does not mention reduced motion.

6. tsParticles confetti

Who it is for: apps that want ready-made effects such as a confetti cannon, explosions, falling confetti or a parade.

Install: npm install @tsparticles/confetti, or npm install @tsparticles/react for the React wrapper.

Strengths: the tsParticles confetti bundle exposes one confetti() function with count, angle, spread, position, colors and shapes, and confetti.create for your own canvas. The disableForReducedMotion option defaults to true in this bundle. The project publishes wrappers for React, Vue, Angular, Svelte and more, plus a Next.js package, and it released version 4.5.4 on November 11, 2026.

Limits: it is a full particle engine, so it brings more moving parts than a single-purpose confetti package. For a simple burst, canvas-confetti is less to learn.

7. party-js

Who it is for: buttons and links that should burst with confetti or sparkles from exactly where the user clicked.

Install: npm install party-js

Strengths: party-js fires confetti or sparkles from an element you pass in, cleans up after itself, and returns a handle you can stop, pause or resume. If the built-in effects are not enough, createEffect exposes the particle engine underneath for your own effects.

Limits: version 3.0.0 arrived on November 4, 2026, after no release since July 2022, and its docs include a guide for moving from version 2. It is framework-agnostic, so in React you call it from a ref in an event handler.

8. react-canvas-confetti

Who it is for: teams that want preset animations on top of canvas-confetti, such as fireworks, snow, pride or vortex.

Install: npm install react-canvas-confetti

Strengths: react-canvas-confetti wraps canvas-confetti in a React component. Presets play with an autorun prop, and a conductor object lets you run, shoot, pause and stop on demand. You can also take the underlying canvas-confetti instance for your own animations.

Limits: its last npm release, 2.0.7, was on March 8, 2024, so treat it as unmaintained. If you only need a burst, calling canvas-confetti directly avoids the extra layer.

Confetti in React Native

Web libraries draw on a browser canvas, so they do not run in React Native. react-native-fast-confetti (MIT, 2.0.2 released July 17, 2026) offers falling, continuous, cannon and PIConfetti components, and respects the device's Reduce Motion setting by default. It needs React Native Skia, Reanimated and Worklets, and its compatibility table lists React Native 0.79 and React 19 as the minimum for version 2. The older react-native-confetti-cannon has not had a release since March 2021, so we left it out of the main list.

How to choose

• One burst on an action: canvas-confetti, or react-rewards if you want a hook tied to a button.
• A full-screen celebration: react-confetti, with recycle switched off for a single wave.
• No canvas at all: react-confetti-explosion.
• Presets such as a cannon or parade: tsParticles confetti.
• Emoji confetti with no dependencies: js-confetti.
• Server rendering: react-rewards says it can be imported on the server, and react-confetti-explosion renders nothing without a browser window. Fire the others only from client code.
• Accessibility: canvas-confetti, tsParticles and react-rewards have built-in reduced motion handling. With the rest, check the prefers-reduced-motion media query before you fire.

Whichever you pick, keep celebrations for moments that matter, such as finishing onboarding or reaching a milestone. Our onboarding gamification examples show where those moments sit in a product. If you are also adding guided tours, our list of JavaScript product tour libraries compares the code options there.

PLG OS Confetti component

PLG OS is our own product, so weigh this entry with that in mind. It is not an open source library like the eight above. If you would rather not wire confetti, tracking and settings up yourself, the PLG OS React confetti component installs with npm i @questlabs/react-sdk, and you deploy the component from the PLG OS platform, then paste the generated code into your project. Its page says text and features are controlled from the no-code PLG OS dashboard, confetti data is added to Customer 360, and data can be sent to your CRM or other tools.

The same component exists for Next.js and for React Native, which installs with npm i @questlabs/react-native-sdk. The Free plan covers 100 MTUs and 1 component, and Starter is $49 a month for 1,000 MTUs and 2 components, as listed on our pricing page. For a single burst on a button, a free library is the simpler choice.

FAQs

What is the best confetti library for React?

canvas-confetti is the most flexible default, since it fires from one function call and has a reduced motion option. If you want a React component or hook, react-confetti suits full-screen rain and react-rewards suits bursts from a button.

Is canvas-confetti free for commercial use?

Its npm entry lists the ISC license, a permissive open source license. react-confetti, react-rewards, react-confetti-explosion, js-confetti, tsParticles and party-js are MIT. Check the license field of the exact version you install.

How do I use canvas-confetti in React?

Install it with npm install canvas-confetti, import it in a client component, and call confetti() inside an event handler or a useEffect. To limit it to one area, create an instance with confetti.create and pass your own canvas.

Does confetti work in Next.js?

Yes, as long as it fires in the browser. Call canvas-confetti, js-confetti and party-js only from client code. react-rewards says it can be imported on the server, and react-confetti-explosion renders nothing when no browser window is present.

How do I add confetti in React Native?

Use a React Native library such as react-native-fast-confetti, which draws with React Native Skia and needs Reanimated and Worklets. Browser canvas libraries such as canvas-confetti do not run in React Native.