Click and a burst of small rectangles and circles pops out and falls with gravity while the label swaps to a success message.
npx shadcn@latest add https://hyperblur.dev/r/confetti-button.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/confetti-button.tsx.
import { ConfettiButton } from "@/components/hyperblur/confetti-button"
<ConfettiButton successLabel="Shipped!">Mark complete</ConfettiButton>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | required | Button label. |
| colors | string[] | ["#ff4d6d", "#ffb703", "#2f7bff", "#19c3f5", "#7cf29a"] | Palette the pieces are drawn from. The first color also tints the focus ring. |
| count | number | 28 | Pieces per burst (capped at 160). |
| successLabel | string | "Done" | Label shown briefly after a click, also announced to screen readers. |
| rounded | number | 9999 | Corner radius in pixels. The default makes a pill. |
| size | "sm" | "md" | "lg" | "md" | Font size and padding preset. |