Confetti

Installation

npx shadcn@latest add "https://magicui.design/r/confetti"

Prop	Type	Default	Description
`particleCount`	`Integer`	`50`	The number of confetti particles to launch
`angle`	`Number`	`90`	The angle in degrees at which to launch confetti
`spread`	`Number`	`45`	The spread in degrees of the confetti
`startVelocity`	`Number`	`45`	The initial velocity of the confetti
`decay`	`Number`	`0.9`	The rate at which confetti slows down
`gravity`	`Number`	`1`	The gravity applied to confetti particles
`drift`	`Number`	`0`	The horizontal drift applied to particles
`flat`	`Boolean`	`false`	Whether confetti particles are flat
`ticks`	`Number`	`200`	The number of frames confetti lasts
`origin`	`Object`	`{ x: 0.5, y: 0.5 }`	The origin point of the confetti
`colors`	`Array of Strings`	`['#26ccff', '#a25afd', '#ff5e7e', '#88ff5a', '#fcff42', '#ffa62d', '#ff36ff']`	Array of color strings in HEX format
`shapes`	`Array of Strings`	`['square', 'circle']`	Array of shapes for the confetti
`zIndex`	`Integer`	`100`	The z-index of the confetti
`disableForReducedMotion`	`Boolean`	`false`	Disables confetti for users who prefer no motion
`useWorker`	`Boolean`	`true`	Use Web Worker for better performance
`resize`	`Boolean`	`true`	Whether to resize the canvas
`canvas`	`HTMLCanvasElement or null`	`null`	Custom canvas element to draw confetti
`scalar`	`Number`	`1`	Scaling factor for confetti size

Prop	Type	Default	Description
`options`	`Object`	`{}`	Options for the confetti
`children`	`React.ReactNode`	`null`	Children to render inside the button