# 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.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- npm dependencies: framer-motion
- Live preview: https://21st.dev/@ruixen.ui/components/confetti-button

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/confetti-button?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt