shadcn.io is an independent project built on shadcn/ui
Cart (3) opens a right panel. Wireless Headphones, a USB-C cable, and a phone case each have a price and a remove button. The total reads $157.00, then Checkout and Continue Shopping.
Use it so shoppers can check the cart without leaving the product. A long cart belongs on a page, not in a Sheet. In Svelte, Ark UI does not update the total.
Installation
Anatomy
Usage
<Drawer swipeDirection="right"><DrawerTrigger>{#snippet asChild(props)}<Button {...props()} variant="outline"><ShoppingCartIcon aria-hidden="true" data-icon="inline-start" />Cart (3)</Button>{/snippet}</DrawerTrigger><DrawerContent showBar={false}><DrawerHeader><DrawerTitle>Shopping Cart</DrawerTitle><DrawerDescription>3 items in your cart</DrawerDescription></DrawerHeader><div class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"><ul class="flex flex-col gap-4">{#each CART_ITEMS as item (item.id)}<li class="flex gap-4 border-b pb-4"><div class="size-20 shrink-0 rounded-md bg-muted"></div><div class="flex flex-1 flex-col gap-1"><h3 class="font-medium text-sm">{item.name}</h3><p class="text-muted-foreground text-xs">{item.variant}</p><div class="flex items-center justify-between"><span class="font-medium text-sm">{item.price}</span><Button aria-label={`Remove ${item.name}`} size="icon-xs" variant="ghost"><Trash2Icon aria-hidden="true" /></Button></div></div></li>{/each}</ul><dl class="flex flex-col gap-2 text-sm"><div class="flex justify-between"><dt class="text-muted-foreground">Subtotal</dt><dd>$147.00</dd></div><div class="flex justify-between"><dt class="text-muted-foreground">Shipping</dt><dd>$10.00</dd></div><div class="flex justify-between border-t pt-2 font-medium"><dt>Total</dt><dd>$157.00</dd></div></dl></div><DrawerFooter><Button>Checkout</Button><DrawerClose>{#snippet asChild(props)}<Button {...props()} variant="outline">Continue Shopping</Button>{/snippet}</DrawerClose></DrawerFooter></DrawerContent></Drawer>FAQ
What does each cart item show?
An image placeholder, the name, the variant, the price and an icon-only remove button. The items come from a static array with an id each for the key.
How is the remove button labeled?
It's icon-only, so aria-label names the item, such as Remove Wireless Headphones. The trash icon is aria-hidden.
Are the totals calculated?
No, they're written out: $147.00, $10.00 and $157.00, in a description list. Compute them from your cart and format them with Intl.NumberFormat.
API Reference
Drawer
Sets swipeDirection="right" and showBar={false}. The rest is on the Drawer page.
Button
Sets props, variant="outline", aria-label, Remove, item and name. The rest is on the Button page.
