# Confetti

> Confetti celebration effect powered by canvas-confetti with button trigger support.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Effects
- Tags: confetti, celebration, animation, canvas, particles
- Docs: https://fancy-ui.rama.app/docs/components/confetti
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/confetti

## Import

```svelte
<script lang="ts">
  import { Confetti } from 'fancy-ui-svelte';
</script>
```

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { Confetti } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `options` | `ConfettiOptions` | `{}` | canvas-confetti options passed to each fire() call |
| `globalOptions` | `ConfettiGlobalOptions` | `{}` | Global canvas-confetti initialization options |
| `manualStart` | `boolean` | `false` | Prevent auto-firing on mount; call fire() manually |
| `ConfettiButton.sound` | `boolean` | `false` | Plays the press cue when the confetti button fires a burst, once the user has enabled sound |

## Snippets

| Snippet | Description |
| --- | --- |
| `children` | ConfettiButton or other trigger elements |

## Examples

### Basic Usage

```svelte
<script lang="ts">
	import { ConfettiButton } from "fancy-ui-svelte";
</script>

<ConfettiButton sound>
	<span
		class="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center gap-2 rounded-lg px-6 py-3 font-medium transition-colors"
	>
		Click for confetti!
	</span>
</ConfettiButton>
```

### Custom Options

Customize confetti behavior.

```svelte
<script lang="ts">
	import { ConfettiButton } from "fancy-ui-svelte";
</script>

<div class="flex items-center gap-4">
	<ConfettiButton sound options={{ particleCount: 200, spread: 100 }}>
		<span
			class="inline-flex items-center gap-2 rounded-lg bg-emerald-600 px-6 py-3 font-medium text-white transition-colors hover:bg-emerald-700"
		>
			Big burst
		</span>
	</ConfettiButton>
	<ConfettiButton sound options={{ particleCount: 50, colors: ["#ff0000", "#00ff00", "#0000ff"] }}>
		<span
			class="inline-flex items-center gap-2 rounded-lg bg-violet-600 px-6 py-3 font-medium text-white transition-colors hover:bg-violet-700"
		>
			RGB confetti
		</span>
	</ConfettiButton>
</div>
```