Confetti Background for React

Confetti drifts slowly down behind your content: strips, squares, dots, chips and streamers in rose, coral, gold, teal and periwinkle. Each piece falls, sways and flips over in 3D on its own timing, and its face is lit at one corner and shaded at the other, so it catches the light as it turns and darkens edge-on. Far pieces are half the size of near ones, fainter and slower, which gives the fall depth, and a narrower box gets fewer pieces, so a phone looks as full as a desktop. The pieces are placed from their index when the page renders and moved by CSS keyframes, so no script runs and nothing speeds up as it falls. It's an ambient background; for a burst when someone clicks, use the confetti button.

Use it for launches, success pages and celebrations. For bursts that explode and fade use Fireworks; for glitter that twinkles in place, Sparkles; for the same fall in white, Snow; for soft colour discs that drift instead, Bokeh.

Installation

Usage

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

<Confetti className="min-h-[420px]">
  <h1>We just launched</h1>
</Confetti>

Confetti is a container: put your content inside and the confetti falls behind it. It fills the box you give it, so set its height (min-h-[420px]), or className="fixed inset-0 -z-10" to cover the whole page.

Demos

Brand colours

colors takes any CSS colours, shared out among the pieces. Theme variables such as var(--primary) work too.

Inside a card

A card with slower pieces (speed={0.7}). count={60} is for a wide box: in a card this narrow about a third of them fall, some 21. The pieces fall at the same pace in a card as on a full page.

Accessibility

The confetti is decoration: the whole layer is hidden from screen readers and ignores the pointer, and your content inside reads as usual. With reduced motion every piece stops where it is, mid-flip, so the box shows a still scatter of confetti. Nothing flashes: the shading changes as a piece turns, over a second or more.

The colours are saturated and can cross your headline's letters: keep text in the foreground colour, and lower count behind body text.

FAQ

API Reference