React Alert Dialog - Success with Celebration
A celebratory success alert dialog with gradient backgrounds and achievement badge for milestone accomplishments
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-success-7.jsonnpx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-success-7.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-success-7.jsonbunx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-success-7.jsonRelated patterns you will also like
Success with Centered Icon
Standard milestone celebration
Badge Component
Badge styling patterns
Success with Icon
Basic success confirmation
Success with Next Steps
Guidance-focused success
Information with Highlighted Content
Similar card-based content
Standard Dialog
General dialog for custom content