Components
Loading preview...
Simple confetti component
npx shadcn@latest add https://21st.dev/r/mlshv/confettiimport { useState } from "react";
import Confetti from "@/components/ui/confetti";
export function Example1() {
const [showBasicConfetti, setShowBasicConfetti] = useState(false);
return (
<div className="p-8">
<h1 className="text-3xl font-bold mb-8">Confetti</h1>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<div className="border rounded-lg p-6 shadow-sm">
<h2 className="text-xl font-semibold mb-4">Basic Confetti</h2>
<p className="mb-4 text-gray-600">
Triggers confetti for 5 seconds when button is clicked.
</p>
<button
type="button"
onClick={() => setShowBasicConfetti(true)}
className="px-4 py-2 font-semibold text-white transition-all bg-blue-500 rounded-md hover:bg-blue-600 hover:scale-105 active:scale-95"
>
Celebrate!
</button>
<div className="mt-4 text-sm text-gray-500">
Status: {showBasicConfetti ? "Confetti active" : "Waiting to celebrate"}
</div>
<Confetti
isActive={showBasicConfetti}
duration={5000}
loop={false}
zIndex={100}
/>
</div>
</div>
</div>
);
}
export function Example2() {
const [showLoopingConfetti, setShowLoopingConfetti] = useState(false);
return <div className="p-8">
<h1 className="text-3xl font-bold mb-8">Confetti</h1><div className="border rounded-lg p-6 shadow-sm">
<h2 className="text-xl font-semibold mb-4">Looping Confetti</h2>
<p className="mb-4 text-gray-600">
Confetti continues until manually stopped.
</p>
<button
type="button"
onClick={() => setShowLoopingConfetti(!showLoopingConfetti)}
className="px-4 py-2 font-semibold text-white transition-all bg-purple-500 rounded-md hover:bg-purple-600 hover:scale-105 active:scale-95"
>
{showLoopingConfetti ? "Stop" : "Start"} Confetti
</button>
<div className="mt-4 text-sm text-gray-500">
Status: {showLoopingConfetti ? "Confetti active" : "Confetti inactive"}
</div>
<Confetti
isActive={showLoopingConfetti}
loop={true}
zIndex={100}
/>
</div></div>
}
export function Example3() {
const [showAutoplayConfetti, setShowAutoplayConfetti] = useState(false);
return <div className="p-8">
<h1 className="text-3xl font-bold mb-8">Confetti</h1>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8"><div className="border rounded-lg p-6 shadow-sm">
<h2 className="text-xl font-semibold mb-4">Auto-Play Confetti</h2>
<p className="mb-4 text-gray-600">
This confetti animation starts automatically when component mounts.
</p>
<button
type="button"
onClick={() => setShowAutoplayConfetti(!showAutoplayConfetti)}
className="px-4 py-2 font-semibold text-white bg-green-500 rounded-md hover:bg-green-600 mb-4"
>
{showAutoplayConfetti ? "Hide" : "Show"} Component
</button>
{showAutoplayConfetti && (
<div className="mt-4 p-4 border border-dashed border-gray-300 rounded-md relative">
<p>Component with auto-play confetti</p>
<Confetti autoPlay duration={3000} />
</div>
)}
</div></div></div>
}