Success with Icon

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.

Success with Icon preview

Installation

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

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

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

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

Related Components

FAQ