React Alert Dialog - Success with Summary Details
A success alert dialog with a green-tinted summary card displaying key metrics in a two-column grid layout
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Numbers tell the success story—24 files, 12.5 MB, Completed status. This React alert dialog presents upload confirmation with a bordered green-tinted card containing grid-based key-value pairs that quantify the accomplishment. Built with shadcn/ui and Radix UI with bg-green-50/green-950 dark mode support, the subtle background reinforces success without overwhelming with color. Perfect for batch operations, bulk uploads, multi-item processing, or any success where specific metrics (count, size, duration) provide tangible proof of completion and help users verify everything worked as expected.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-success-5.jsonnpx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-success-5.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-success-5.jsonbunx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-success-5.jsonRelated patterns you will also like
Success with Icon
Basic success confirmation
Success with Next Steps
Guidance-focused success
Destructive with Item Count
Similar metric display pattern
Success with Badge
Status indication variant
Card Component
Standalone card patterns
Standard Dialog
General dialog for custom content