Shopping Cart
A shopping cart card shows shoppers what they're about to buy. Product thumbnails with names, prices, and quantities stack into a list, a subtotal keeps the math honest, and a checkout button moves the order forward. It works as a dropdown panel, a slide-in drawer, or a step of the checkout page itself.
<div class="card">
<div class="card-header">
<div class="card-title">Shopping Cart</div>
<div class="card-description">You have 3 items in your cart.</div>
<div class="card-action -mr-2.5">
<button type="button" class="btn btn-ghost btn-sm">Clear</button>
</div>
</div>
<div class="card-content flex flex-col gap-6">
<div class="flex gap-4">
<div class="size-20 shrink-0 overflow-hidden rounded-md border">
<img
src="https://images.unsplash.com/photo-1578500494198-246f612d3b3d?rect=220,0,3264,3264&w=640&h=640&fit=crop&auto=format&q=100"
alt="Vintage Leather Sofa"
class="size-full object-cover"
/>
</div>
<div class="flex min-w-0 flex-1 flex-col">
<div class="flex items-start justify-between gap-3">
<h3 class="truncate text-sm font-medium">Vintage Leather Sofa</h3>
<button
type="button"
class="btn btn-ghost btn-icon -mt-1.5 -mr-1.5 size-6 text-muted-foreground"
aria-label="Remove Vintage Leather Sofa"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x size-3.5"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
<p class="mt-1 truncate text-xs text-muted-foreground">
Full-grain aniline
</p>
<div class="mt-auto flex items-center justify-between">
<div class="btn-group rounded-md bg-muted">
<button
type="button"
class="btn btn-ghost btn-xs btn-icon"
aria-label="Decrease quantity of Vintage Leather Sofa"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-minus"
aria-hidden="true"
>
<path d="M5 12h14"></path>
</svg>
</button>
<div
class="btn-group-text border-0 bg-transparent px-2 text-xs shadow-none tabular-nums"
>
1
</div>
<button
type="button"
class="btn btn-ghost btn-xs btn-icon"
aria-label="Increase quantity of Vintage Leather Sofa"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-plus"
aria-hidden="true"
>
<path d="M5 12h14"></path>
<path d="M12 5v14"></path>
</svg>
</button>
</div>
<p class="text-sm font-medium tabular-nums">
<span
class="mr-1.5 text-xs font-normal text-muted-foreground line-through"
>$1,099</span
>$899
</p>
</div>
</div>
</div>
<div class="flex gap-4">
<div class="size-20 shrink-0 overflow-hidden rounded-md border">
<img
src="https://images.unsplash.com/photo-1571139627661-cf707929f465?rect=0,57,2592,2592&w=640&h=640&fit=crop&auto=format&q=100"
alt="Cable Knit Sweater"
class="size-full object-cover"
/>
</div>
<div class="flex min-w-0 flex-1 flex-col">
<div class="flex items-start justify-between gap-3">
<h3 class="truncate text-sm font-medium">Cable Knit Sweater</h3>
<button
type="button"
class="btn btn-ghost btn-icon -mt-1.5 -mr-1.5 size-6 text-muted-foreground"
aria-label="Remove Cable Knit Sweater"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x size-3.5"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
<p class="mt-1 truncate text-xs text-muted-foreground">
Cream · Size S
</p>
<div class="mt-auto flex items-center justify-between">
<div class="btn-group rounded-md bg-muted">
<button
type="button"
class="btn btn-ghost btn-xs btn-icon"
aria-label="Decrease quantity of Cable Knit Sweater"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-minus"
aria-hidden="true"
>
<path d="M5 12h14"></path>
</svg>
</button>
<div
class="btn-group-text border-0 bg-transparent px-2 text-xs shadow-none tabular-nums"
>
1
</div>
<button
type="button"
class="btn btn-ghost btn-xs btn-icon"
aria-label="Increase quantity of Cable Knit Sweater"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-plus"
aria-hidden="true"
>
<path d="M5 12h14"></path>
<path d="M12 5v14"></path>
</svg>
</button>
</div>
<p class="text-sm font-medium tabular-nums">$79</p>
</div>
</div>
</div>
<div class="flex gap-4">
<div class="size-20 shrink-0 overflow-hidden rounded-md border">
<img
src="https://images.unsplash.com/photo-1710954962775-c46bd6a5f67f?rect=0,0,3072,3072&w=640&h=640&fit=crop&auto=format&q=100"
alt="Oversized Cotton Tee"
class="size-full object-cover"
/>
</div>
<div class="flex min-w-0 flex-1 flex-col">
<div class="flex items-start justify-between gap-3">
<h3 class="truncate text-sm font-medium">Oversized Cotton Tee</h3>
<button
type="button"
class="btn btn-ghost btn-icon -mt-1.5 -mr-1.5 size-6 text-muted-foreground"
aria-label="Remove Oversized Cotton Tee"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x size-3.5"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
<p class="mt-1 truncate text-xs text-muted-foreground">
Sand · Size M · $29 each
</p>
<div class="mt-auto flex items-center justify-between">
<div class="btn-group rounded-md bg-muted">
<button
type="button"
class="btn btn-ghost btn-xs btn-icon"
aria-label="Decrease quantity of Oversized Cotton Tee"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-minus"
aria-hidden="true"
>
<path d="M5 12h14"></path>
</svg>
</button>
<div
class="btn-group-text border-0 bg-transparent px-2 text-xs shadow-none tabular-nums"
>
2
</div>
<button
type="button"
class="btn btn-ghost btn-xs btn-icon"
aria-label="Increase quantity of Oversized Cotton Tee"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-plus"
aria-hidden="true"
>
<path d="M5 12h14"></path>
<path d="M12 5v14"></path>
</svg>
</button>
</div>
<p class="text-sm font-medium tabular-nums">$58</p>
</div>
</div>
</div>
</div>
<div class="card-footer flex-col">
<div class="separator mb-4"></div>
<div class="flex w-full items-center justify-between">
<span class="text-sm text-muted-foreground">Subtotal</span
><span class="text-base font-semibold tabular-nums">$1,036</span>
</div>
<button class="btn mt-4 w-full">Checkout</button>
<p class="mt-3 w-full text-center text-xs text-muted-foreground">
Free shipping & returns on all orders
</p>
</div>
</div>Browse more card examples.