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 Solid, Ark UI does not upload the files.
Installation
Anatomy
Usage
<AlertDialog>
<AlertDialogTrigger asChild={props => <Button {...props()}>Complete Action</Button>} />
<AlertDialogContent>
<AlertDialogHeader>
<div class="flex items-center gap-2">
<CircleCheckIcon aria-hidden="true" class="size-5 text-success" />
<AlertDialogTitle>Files Uploaded Successfully</AlertDialogTitle>
</div>
<AlertDialogDescription>
All files have been uploaded and processed.
</AlertDialogDescription>
</AlertDialogHeader>
<dl class="grid grid-cols-2 gap-2 rounded-lg border border-success/20 bg-success/5 p-4 text-sm">
<dt class="text-muted-foreground">Total Files:</dt>
<dd class="font-medium">24</dd>
<dt class="text-muted-foreground">Total Size:</dt>
<dd class="font-medium">12.5 MB</dd>
<dt class="text-muted-foreground">Status:</dt>
<dd class="font-medium text-success-foreground">Completed</dd>
</dl>
<AlertDialogFooter>
<AlertDialogClose asChild={props => <AlertDialogAction {...props()}>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
Sets asChild and props. The rest is on the Alert Dialog page.
Button
Sets props. The rest is on the Button page.
