Confetti button
A fun and interactive button that triggers a confetti explosion effect on click.
A fun and interactive button that triggers a confetti explosion effect on click.
Installation
npx shadcn@latest add https://badtz-ui.com/r/confetti-button.jsonInstall the following dependencies:
npm install clsx tailwind-merge canvas-confetti @types/canvas-confettiAdd the utils file to the @/lib folder
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}Copy and paste the following code into your project.
Component: confetti-button
Update the import paths to match your project setup.
Usage
import { ConfettiButton } from "@/components/ui/confetti-button";<ConfettiButton>Button</ConfettiButton>Props
ConfettiButton props.
Type information not available