React Alert Dialog - Success with Icon
A success alert dialog with a green CheckCircle icon inline with the title for instant visual success recognition
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Green checkmarks trigger instant relief—payment went through, order confirmed, account created. This React alert dialog adds a green CheckCircle2 icon (from Lucide React) next to the title for immediate visual confirmation before users even read the words. Built with shadcn/ui and Radix UI with flex items-center gap-2 layout, the icon and title alignment creates professional polish. Perfect for payment confirmations, order completions, account activations, or any high-stakes success where the green checkmark provides instant emotional reassurance that everything worked as intended.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-success-2.jsonnpx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-success-2.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-success-2.jsonbunx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-success-2.jsonRelated patterns you will also like
Simple Success Message
Minimal success without icon
Success with Centered Icon
Centered icon variant
Information with Icon
Icon usage patterns
Success with Details
Success with additional info
Success with Actions
Success with multiple buttons
Toast Notification
Less intrusive feedback alternative