Cursor & Interaction Effects

Confetti Button

완료, 성공, 축하 같은 순간에 짧은 즐거움을 더하는 색종이 효과입니다.

Preview

interaction effect

Confetti Button

press to celebrate

bash

Copied

1pnpm dlx shadcn@latest add https://ryong-blog.vercel.app/r/confetti.json

bash

Copied

1npx shadcn@latest add https://ryong-blog.vercel.app/r/confetti.json

bash

Copied

1yarn dlx shadcn@latest add https://ryong-blog.vercel.app/r/confetti.json

bash

Copied

1bunx shadcn@latest add https://ryong-blog.vercel.app/r/confetti.json

typescript

Copied

1import { ConfettiButton } from "@/components/confetti"23export default function Example() {4  return <ConfettiButton>Celebrate</ConfettiButton>5}

Prop	Type	Default	Description
options	ConfettiOptions	-	Per-shot confetti options.
globalOptions	ConfettiGlobalOptions	{ resize: true }	Canvas instance options.
manualstart	boolean	false	Whether to start manually.
children	React.ReactNode	-	Content rendered inside the component.