Confetti

Pro

Celebration burst of soft, accent-coloured specks of light that spill from whatever was just earned and fade away, plus a gentle, pausable rain mode for ambient moments.

Preview

Installation

npx @lumioui/cli add pro/confetti

Usage

import { Confetti } from "@/components/ui/confetti/confetti";
<Confetti />

Examples

Burst

Finishing a unit in a language-learning app.

Rain

A friend's birthday in a messaging app.

API reference

Prop Type Default
y* number } —
count number

Mote count. Default 14 (burst) / 18 (rain).

 —
colors string[]

Mote colours. Defaults to the surface accent — one hue, as light.

 —
mode "burst" | "rain"

"burst" lights on demand; "rain" drifts ambient motes while active.

 "burst"
fire boolean

Declarative trigger — lights a burst on the false→true transition.

 —
active boolean

Rain only: run the drift. false dims it out and stops the clock. Default true.

 true
origin { x: number

Where the burst lights, as fractions of the field. Default centre, upper third.

 { x: 0.5, y: 0.3 }
radius number

Radius of the earned object at the origin — motes switch on at its edge. Default 0.

 0
className string —