We are working on new components <3
HextaUIHextaUI
AnimationConfetti

Confetti

Confetti animation for your website with canvas-confetti

Preview

Code

Confetti.tsx
"use client";
 
import React from "react";
import confetti from "canvas-confetti";
import { Button } from "@/components/ui/button";
 
// Basic confetti blast
export const BasicConfetti = () => {
  const triggerBasicConfetti = () => {
    confetti({
      particleCount: 100,
      spread: 70,
      origin: { y: 0.6 },
    });
  };
 
  return (
    <Button variant="secondary" onClick={triggerBasicConfetti}>
      Basic Confetti
    </Button>
  );
};

Uitlity function

The following utility function is used in the examples below.

Confetti.tsx
const randomInRange = (min: number, max: number) => {
  return Math.random() * (max - min) + min;
};

Examples

Basic Confetti

Realistic Confetti

Fireworks Confetti

Star Confetti

Snow Confetti

School Pride Confetti

Edit on GitHub

Last updated on

On this page