shadcn.io is an independent project built on shadcn/ui
The title says the files were uploaded. The panel lists those three facts. The figures are hard-coded. Done does not open the files. Nothing was uploaded.
Show a summary for a batch. One sentence is enough for a single file. Failures belong in an Alert, not this color. In React, Base UI does not upload the files.
Installation
Anatomy
Usage
<AlertDialog>
<AlertDialogTrigger render={<Button />}>Complete Action</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<div className="flex items-center gap-2">
<CircleCheckIcon aria-hidden="true" className="size-5 text-success" />
<AlertDialogTitle>Files Uploaded Successfully</AlertDialogTitle>
</div>
<AlertDialogDescription>
All files have been uploaded and processed.
</AlertDialogDescription>
</AlertDialogHeader>
<dl className="grid grid-cols-2 gap-2 rounded-lg border border-success/20 bg-success/5 p-4 text-sm">
<dt className="text-muted-foreground">Total Files:</dt>
<dd className="font-medium">24</dd>
<dt className="text-muted-foreground">Total Size:</dt>
<dd className="font-medium">12.5 MB</dd>
<dt className="text-muted-foreground">Status:</dt>
<dd className="font-medium text-success-foreground">Completed</dd>
</dl>
<AlertDialogFooter>
<AlertDialogAction>Done</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>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.
API Reference
Alert Dialog
No extra props in this demo. The rest is on the Alert Dialog page.
Button
No extra props in this demo. The rest is on the Button page.
