Confetti Button

Installation

npx kinetic-ui-cli@latest add confetti-button

How It Works

The ConfettiButton utilizes canvas-confetti to create a massive, performant particle explosion that triggers directly from the click coordinates of the button itself. You can easily customize the particle colors, count, velocity, and spread by passing standard confetti options into the component.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { ConfettiButton } from "@/components/creative/confetti-button";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { ConfettiButton } from "@/components/creative/confetti-button";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <ConfettiButton
        options{/* value */}
      >
        <div>Content goes here</div>
      </ConfettiButton>
    </div>
  );
}