# Confetti

> Fire a confetti burst from any point, or use the button that bursts from itself.

Component · Pro · https://lodeui.com/components/confetti

## When to use

- Celebrating real milestones: first project, payment, launch, streaks.

## When not to use

- Routine actions: it loses meaning fast.

## Installation

```bash
npx shadcn@latest add @lode/confetti
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

## Usage

```tsx title="example.tsx"
import { confetti, ConfettiButton } from "@/components/ui/confetti";

<ConfettiButton onClick={publish}>Publish</ConfettiButton>

// Anywhere, e.g. after a successful payment
confetti({ x: window.innerWidth / 2, y: 200, count: 160 });
```

## API reference

### confetti

Fires a burst on a temporary full-screen canvas that removes itself when done.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| x / y | `number` | `screen center` | Origin in viewport pixels. |
| count | `number` | `120` | Pieces. |
| angle / spread | `number` | `-90 / 70` | Direction and fan in degrees (-90 is up). |
| velocity | `number` | `14` | Starting speed. |
| colors | `string[]` | – | Piece colors. |

### ConfettiButton

A button that bursts from its own center, then calls your onClick. Accepts button attributes plus options.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| options | `ConfettiOptions` | – | Passed to confetti(). |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter / Space | Press the button |

## Accessibility

- The canvas is aria-hidden and ignores the pointer.
- Does nothing when the person prefers reduced motion.

## Motion

- Pieces tumble with gravity and drag, then fade as they fall.

## Responsive behavior

- Covers the viewport at device pixel ratio up to 2.

## Performance

- Plain canvas with one animation frame loop; no dependencies; cleaned up automatically.

## Notes for AI

- Call confetti() only from user actions or real successes, not on page load.

## Related

- [Like button](https://lodeui.com/components/like-button) — Heart toggle that bursts into particles and rolls its count.
- [Action button](https://lodeui.com/components/action-button) — A button that morphs through saving, saved and failed, right where you clicked.
- [Toast](https://lodeui.com/components/toast) — Stacked notifications that fan out on hover, swipe to dismiss, and track promises.