konfetti konfetti

npm install @konfetti-js/core

import { fire, cannon, continuous } from '@konfetti-js/core';

// A burst from the middle of the screen
fire();

// Tune it
fire({ particleCount: 120, spread: 70, origin: { x: 0.5, y: 0.8 } });

// Use a preset, and override any of its options
cannon({ colors: ['#ff48b0', '#0078bf'] });

// A steady stream; call the returned function to stop it
const stop = continuous();
setTimeout(stop, 3000);

No build step needed. The browser bundle puts everything on window.konfetti.

<script src="https://cdn.jsdelivr.net/npm/@konfetti-js/core@0.4/dist/konfetti.min.js"></script>
<script>
  konfetti.fire({ particleCount: 100 });
</script>

Or import the ES module directly:

<script type="module">
  import { fireworks } from 'https://cdn.jsdelivr.net/npm/@konfetti-js/core@0.4/+esm';
  fireworks();
</script>

npm install @konfetti-js/react

import { useState } from 'react';
import { useKonfetti, Konfetti } from '@konfetti-js/react';

// Hook: call the functions from your own handlers
function SaveButton() {
  const { cannon } = useKonfetti();
  return <button onClick={() => cannon()}>Save</button>;
}

// Component: fires when `fire` turns true
function Celebration() {
  const [done, setDone] = useState(false);
  return (
    <>
      <button onClick={() => setDone(true)}>Finish</button>
      <Konfetti fire={done} preset="fireworks" onFired={() => setDone(false)} />
    </>
  );
}

npm install @konfetti-js/vue

<script setup>
import { useKonfetti, vKonfetti } from '@konfetti-js/vue';

const { fire } = useKonfetti();
</script>

<template>
  <!-- Composable -->
  <button @click="fire({ particleCount: 100 })">Celebrate</button>

  <!-- Directive: fires from the element on click -->
  <button v-konfetti>Click me</button>
  <button v-konfetti="{ preset: 'fireworks' }">Fireworks</button>
</template>

npm install @konfetti-js/svelte

<script>
  import { konfettiAction, createKonfetti } from '@konfetti-js/svelte';

  const { fire } = createKonfetti();
</script>

<!-- Action: fires from the element on click -->
<button use:konfettiAction>Click me</button>
<button use:konfettiAction={{ preset: 'fireworks' }}>Fireworks</button>

<!-- Functions -->
<button onclick={() => fire()}>Celebrate</button>

npm install @konfetti-js/solid

import { createSignal } from 'solid-js';
import { useKonfetti, Konfetti } from '@konfetti-js/solid';

function SaveButton() {
  const { cannon } = useKonfetti();
  return <button onClick={() => cannon()}>Save</button>;
}

function Celebration() {
  const [done, setDone] = createSignal(false);
  return (
    <>
      <button onClick={() => setDone(true)}>Finish</button>
      <Konfetti fire={done()} preset="fireworks" onFired={() => setDone(false)} />
    </>
  );
}

npm install @konfetti-js/web-components

<script type="module">
  import { defineAllElements } from '@konfetti-js/web-components';
  defineAllElements();
</script>

<!-- Fires when anything inside is clicked -->
<konfetti-trigger preset="fireworks">
  <button>Click me</button>
</konfetti-trigger>

<!-- Fire it from your own code -->
<konfetti-burst id="burst" preset="cannon"></konfetti-burst>
<script>
  document.getElementById('burst').fire();
</script>