Components

Confetti

A celebratory confetti burst fired from a button or any trigger.

php artisan blatui:add confetti

<x-ui.confetti />

Custom Colors

<x-ui.confetti :colors="['#0ea5e9', '#14b8a6', '#22c55e', '#84cc16']" :count="120">
    <x-ui.button variant="outline" type="button">Pop the cooler palette &#10024;</x-ui.button>
</x-ui.confetti>

Directional

<div class="flex flex-wrap gap-3">
    {{-- Aim the burst: degrees where 0=right, 90=up, 180=left. spreadArc narrows the fan. --}}
    <x-ui.confetti :direction="60" :spread-arc="50">
        <x-ui.button variant="outline" type="button">Up &amp; right</x-ui.button>
    </x-ui.confetti>
    <x-ui.confetti :direction="120" :spread-arc="50">
        <x-ui.button variant="outline" type="button">Up &amp; left</x-ui.button>
    </x-ui.confetti>
</div>

Fullscreen

{{-- fullscreen rains confetti down from across the top edge of the viewport. --}}
<x-ui.confetti fullscreen :count="160">
    <x-ui.button type="button">Celebrate (full screen) &#127882;</x-ui.button>
</x-ui.confetti>

API Reference

Props, slots and exposed methods for <x-ui.confetti>.

Props

Prop	Type	Default	Description
`count`	`int`	`80`	Number of confetti particles spawned per burst.
`spread`	`number`	`70`	Horizontal spread of the burst — larger values fling particles farther from the origin.
`colors`	`array`	—	Optional list of CSS colours cycled across the particles. Falls back to a built-in festive palette.
`direction`	`number`	—	Aim the burst, in degrees (0 = right, 90 = up, 180 = left, 270 = down). Omit for a full 360° fan.
`spreadArc`	`number`	`90`	When direction is set, the arc width (in degrees) the particles fan across.
`fullscreen`	`bool`	`false`	Rain confetti down from across the top edge of the viewport instead of bursting from the trigger.

Slots

Slot	Description
`default`	Trigger content that becomes the clickable element firing the burst. If omitted, a default "Celebrate" button is rendered.

Methods

Available on the component's Alpine scope — call them from markup in the slot (e.g. @click="…").

Method	Description
`fire()`	Spawns one confetti burst from the centre of the trigger. Exposed on the Alpine scope so it can be called from a slot child or via an external $refs handle. No-op under prefers-reduced-motion.