shadcn.io is not affiliated with official shadcn/ui
Alert Dialog examples · Success
Success with Summary Details Alert Dialog for React
A success dialog with a summary of the upload in a tinted panel.
Framework
UI library
Numbers prove a batch job worked: 24 files, 12.5 MB, completed. This React alert dialog confirms an upload with a summary in a success-tinted panel. It's shadcn.io's Alert Dialog on Base UI with the summary as a description list.
Preview
Installation
Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
FAQ
When should I show a summary?
For batch operations, where people can't see every item: uploads, imports, bulk edits.
Which details should it include?
What people care about: how many, how big, what happened. Use human units and include currencies.
How is the summary laid out?
A dl in a two-column grid, dt labels in text-muted-foreground and dd values in font-medium.
How strong should the background be?
Subtle: bg-success/5 with a border-success/20 border. The numbers are the point, not the color.
Related
- Success with Icon Alert DialogA success dialog with a check icon beside
- Success with Next Steps Alert DialogA success dialog that lists numbered next
- Destructive with Item Count Alert DialogA destructive dialog that names how many
- Success with Multiple Actions Alert DialogA success dialog with Close and a
- Standard CardA basic card with a title, a description
- Standard DialogA share dialog with a read-only link, a