Components
ConfettiButton
The ConfettiButton component is a fun and interactive button built entirely with shadcn UI and Tailwind CSS that celebrates user actions with a burst of confetti. When clicked, tiny colorful particles emit from the exact middle bottom of the button, creating a visually appealing effect ideal for achievements, “Level Up” notifications, or form submissions. The component dynamically calculates the button width to ensure the confetti always originates from the center, regardless of the button’s size. With configurable labels, click callbacks, and smooth Framer Motion animations, it provides a delightful and responsive user experience while seamlessly integrating into any shadcn UI-based project.
"use client"
import ConfettiButton from "@/components/ui/confetti-button"
export default function ConfettiButtonDemo() {
return (
<div className="p-6 flex flex-col gap-4">
<ConfettiButton
label="Level Up!"
onClick={() => console.log("Level Up clicked!")}
/>
<ConfettiButton
label="Achievement Unlocked"
onClick={() => console.log("Achievement clicked!")}
/>
<ConfettiButton
label="Submit"
onClick={() => console.log("Form Submitted!")}
/>
</div>
)
}
Dependencies
Published
Similar components
Explore more
Part of Ruixen UI — browse the full library on 21st.dev.