Success with Celebration

Some wins are too big for green checkmarks—100 tasks completed, 1000 users reached, year anniversary. This React alert dialog uses PartyPopper icon with purple-pink gradient backgrounds (bg-gradient-to-br, bg-gradient-to-r) and an ACHIEVEMENT UNLOCKED badge to create genuine celebration. Built with shadcn/ui and Radix UI with centered layout and playful gradients, the design breaks from standard green success to signal this is special. Perfect for gamification milestones, usage achievements, anniversary moments, or any rare accomplishment deserving more fanfare than routine success confirmations.

Success with Celebration preview

Installation

npx shadcn@latest add https://www.shadcn.io/r/alert-dialog-success-7.json

npx shadcn@latest add https://www.shadcn.io/r/alert-dialog-success-7.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/alert-dialog-success-7.json

bunx shadcn@latest add https://www.shadcn.io/r/alert-dialog-success-7.json

Related Components

FAQ