Skip to main content

​
Overview

The Confetti component provides a fun and engaging way to celebrate user actions with customizable confetti animations. Built using the canvas-confetti library, it offers extensive customization options.

​
Installation

This component requires additional dependencies: 
npm install canvas-confetti
npm install -D @types/canvas-confetti

​
Usage

​
Basic Confetti

<Confetti :options="{ particleCount: 100, spread: 70 }" />

​
Confetti Button

<ConfettiButton :options="{ particleCount: 150 }">
  Click me!
</ConfettiButton>

​
Confetti Component Props

​
options
ConfettiOptions
default:"{}"
Options for individual confetti bursts.
​
globalOptions
ConfettiGlobalOptions
default:"{}"
Global options for the confetti instance (e.g., resize behavior).
​
manualstart
boolean
default:"false"
If true, confetti won’t start automatically on mount.

​
Confetti Options

​
particleCount
number
default:"50"
The number of confetti particles to launch.
​
angle
number
default:"90"
The angle in degrees at which to launch the confetti.
​
spread
number
default:"45"
The spread in degrees of the confetti.
​
startVelocity
number
default:"45"
The initial velocity of the confetti particles.
​
decay
number
default:"0.9"
The rate at which confetti particles slow down.
​
gravity
number
default:"1"
The gravity applied to confetti particles.
​
drift
number
default:"0"
The horizontal drift applied to confetti particles.
​
ticks
number
default:"200"
The number of animation frames the confetti should last.
​
origin
{ x: number, y: number }
default:"{ x: 0.5, y: 0.5 }"
The origin point (from 0 to 1) of the confetti emission.
​
colors
string[]
Array of color strings in HEX format for the confetti particles.
​
shapes
string[]
default:"['square', 'circle']"
Array of shapes for the confetti particles.
​
scalar
number
default:"1"
Scaling factor for confetti particle sizes.
​
zIndex
number
default:"100"
The z-index value for the confetti canvas element.
​
disableForReducedMotion
boolean
default:"false"
Disables confetti for users who prefer reduced motion.
​
useWorker
boolean
default:"true"
Use a Web Worker for better performance.
​
resize
boolean
default:"true"
Whether to automatically resize the canvas when the window resizes.
​
canvas
HTMLCanvasElement | null
default:"null"
Custom canvas element to draw confetti on.
​
flat
boolean
default:"false"
If true, confetti particles will be flat (no rotation or 3D effect).

​
ConfettiButton Props

​
options
ConfettiOptions & { canvas?: HTMLCanvasElement }
default:"{}"
Options for confetti when the button is clicked.

​
Credits

Build docs developers (and LLMs) love

Get started for freeTalk to us