Success with Centered Icon

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.

Success with Centered Icon preview

Installation

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

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

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

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

Related Components

FAQ