New
CartSlide-over Cart Drawer
A right-anchored cart panel over a dimmed backdrop, with line items, a subtotal and a checkout button.
#cart#drawer#slide-over
3 frameworksIntermediate
Loading…
Line items beside an order-summary sidebar whose subtotal, tax and total are all derived from the items.
<!--
Items and an order-summary sidebar. Every figure in the summary is derived
from the items - subtotal, tax and total are computed, never a second set of
hardcoded numbers that can drift out of sync with the list. The sidebar drops
below the items on mobile and sits beside them from lg: up.
-->
<div class="mx-auto grid w-full max-w-5xl gap-8 px-4 py-6 sm:px-6 lg:grid-cols-[1fr_18rem]">
<ul class="divide-y divide-gray-100 dark:divide-gray-800">
<li class="flex flex-col gap-3 py-4 sm:flex-row sm:items-center">
<div class="h-16 w-16 flex-none rounded-lg bg-gradient-to-br from-cyan-400 to-blue-500" aria-hidden="true"></div>
<div class="min-w-0 flex-1"><p class="text-sm font-medium text-gray-900 dark:text-gray-100">Desk Lamp</p><p class="text-xs text-gray-500 dark:text-gray-400">Qty 1</p></div>
<div class="text-sm font-semibold tabular-nums text-gray-900 sm:w-20 sm:text-right dark:text-gray-100">$64.00</div>
</li>
</ul>
<aside class="h-fit rounded-xl border border-gray-200 bg-gray-50 p-5 dark:border-gray-800 dark:bg-gray-900">
<h2 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Order summary</h2>
<dl class="mt-4 space-y-2 text-sm">
<div class="flex justify-between"><dt class="text-gray-600 dark:text-gray-400">Subtotal</dt><dd class="font-medium tabular-nums text-gray-900 dark:text-gray-100">$64.00</dd></div>
<div class="flex justify-between"><dt class="text-gray-600 dark:text-gray-400">Tax</dt><dd class="font-medium tabular-nums text-gray-900 dark:text-gray-100">$5.12</dd></div>
<div class="flex justify-between"><dt class="text-gray-600 dark:text-gray-400">Shipping</dt><dd class="font-medium tabular-nums text-gray-900 dark:text-gray-100">$6.00</dd></div>
<div class="flex justify-between border-t border-gray-200 pt-2 text-base dark:border-gray-800"><dt class="font-semibold text-gray-900 dark:text-gray-100">Total</dt><dd class="font-bold tabular-nums text-gray-900 dark:text-gray-100">$75.12</dd></div>
</dl>
<a href="#" class="mt-5 flex w-full items-center justify-center rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-900">Checkout</a>
</aside>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
itemsrequired | CartLine[] | - | The array of items to render. |
currency | string | '$' | Currency |
taxRate | number | 0 | Tax rate |
shippingCents | number | 0 | Shipping cents |
className | string | - | Additional classes merged onto the root element. |
Every figure in the summary is computed - subtotal from the items, tax from `taxRate`, total from both plus `shippingCents` - so nothing can drift out of sync with the list, and the Tax row hides itself when the rate is 0. The sidebar sits beside the items from `lg:` up and drops below them on smaller screens.