React Alert Dialog - Success with Centered Icon
A success alert dialog with a large centered CheckCircle icon in a green circle for milestone celebrations
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Major accomplishments deserve ceremony—account creation, first purchase, milestone completion. This React alert dialog centers a CheckCircle2 icon inside a green circular background with items-center and text-center alignment, creating a celebratory moment that feels more significant than routine confirmations. Built with shadcn/ui and Radix UI with proper dark mode support (bg-green-100/green-900), the symmetrical layout slows users down to appreciate their achievement. Perfect for account activations, onboarding completions, first-time actions, or any success moment worth treating as a milestone rather than a mere transaction confirmation.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-success-3.jsonnpx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-success-3.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-success-3.jsonbunx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-success-3.jsonRelated patterns you will also like
Success with Icon
Inline icon alternative
Simple Success Message
Minimal success without icon
Information with Centered Icon
Similar centered layout pattern
Success with Next Steps
Success with guidance
Success with Summary
Success with detailed info
Standard Dialog
General dialog for custom content