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…
A centred empty-cart placeholder with a decorative icon, a message and a start-shopping CTA.
<!--
The icon is decorative and aria-hidden - the heading already says "empty", so
announcing the glyph would just be noise. The CTA is the only actionable thing
here, and it's a real link so it works with keyboard and middle-click.
-->
<div class="mx-auto flex w-full max-w-md flex-col items-center px-4 py-12 text-center">
<div class="flex h-16 w-16 items-center justify-center rounded-full bg-gray-100 text-gray-400 dark:bg-gray-800 dark:text-gray-500" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" class="h-8 w-8"><path d="M3 4h2l2.4 12h9.2l1.8-8H6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><circle cx="9" cy="20" r="1.4" fill="currentColor"/><circle cx="17" cy="20" r="1.4" fill="currentColor"/></svg>
</div>
<h2 class="mt-5 text-lg font-semibold text-gray-900 dark:text-gray-100">Your cart is empty</h2>
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Browse the catalogue and add something you love - it will show up right here.</p>
<a href="#" class="mt-6 inline-flex items-center justify-center rounded-lg bg-blue-600 px-5 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">Start shopping</a>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
title | string | 'Your cart is empty' | Heading text for the card. |
copy | string | - | Body text shown under the title. |
ctaLabel | string | 'Start shopping' | Call-to-action button text. |
ctaHref | string | '#' | Destination for the call-to-action link. |
className | string | - | Additional classes merged onto the root element. |
The cart glyph is `aria-hidden` because the heading already says "empty" - announcing the icon would be noise. Everything but the title is a prop, and the CTA is a real link so it works with keyboard and middle-click. Show this when the item list is empty.