shadcn.io is an independent project built on shadcn/ui
The title is Order #12345, placed on January 15, 2024. Status is a Shipped badge. Two line items lead to a subtotal of $89.97, shipping of $5.00, and a total of $94.97. Track Shipment is at the bottom.
Use it to inspect an order without leaving the list. A short summary can sit in a Dialog instead. In Svelte, Ark UI does not add up the total.
Installation
Anatomy
Usage
<Sheet><SheetTrigger>{#snippet asChild(props)}<Button {...props()} variant="outline">View Order</Button>{/snippet}</SheetTrigger><SheetContent><SheetHeader><SheetTitle>Order #12345</SheetTitle><SheetDescription>Placed on January 15, 2024</SheetDescription></SheetHeader><div class="flex flex-col gap-4 p-4"><div class="flex items-center justify-between"><span class="font-medium text-sm">Status</span><Badge variant="secondary">Shipped</Badge></div><Separator /><div class="flex flex-col gap-3"><h4 class="font-semibold text-sm">Items</h4>{#each ITEMS as item (item.name)}<div class="flex justify-between text-sm"><span>{item.name}</span><span>{item.price}</span></div>{/each}</div><Separator /><div class="flex flex-col gap-2"><div class="flex justify-between text-sm"><span>Subtotal</span><span>$89.97</span></div><div class="flex justify-between text-sm"><span>Shipping</span><span>$5.00</span></div><div class="flex justify-between font-semibold text-sm"><span>Total</span><span>$94.97</span></div></div><Button class="w-full" variant="outline">Track Shipment</Button></div></SheetContent></Sheet>FAQ
How is the order laid out?
Status with a Shipped badge, a separator, the Items heading with two lines, another separator, then Subtotal, Shipping and a bold Total. Track Shipment closes the column.
How do I show other statuses?
Change the badge's text and variant: secondary for Shipped here, outline for Pending, destructive for Cancelled. Keep the word in the badge so the status isn't color alone.
Are the totals calculated?
No, they're written out: $89.97, $5.00 and $94.97. Compute them from your order data, and format them with Intl.NumberFormat for the shopper's currency.
Where does Track Shipment go?
Nowhere yet: it's an outline Button with no handler. Render it as a link to the carrier's tracking page, opening in a new tab.
API Reference
Sheet
No extra props in this demo. The rest is on the Sheet page.
Button
Sets props and variant="outline". The rest is on the Button page.
Badge
Sets variant="secondary". The rest is on the Badge page.
Separator
No extra props in this demo. The rest is on the Separator page.
