Tailwind CSS Cart Drawers Blocks

All Blocks
Ecommerce
Cart Drawers

Cart Drawers

Cart drawers for slide-over shopping carts with line items, subtotal summaries, and cart-to-checkout actions.

Shopping Cart Drawer with Line Items and Checkout Actions Pro

Right-side cart drawer combines a login prompt, stacked mini line items, subtotal copy, and paired cart and checkout buttons.

<div id="hs-pro-shco" class="hs-overlay hs-overlay-open:translate-x-0 hidden translate-x-full fixed top-0 inset-e-0 transition-all duration-300 transform size-full sm:w-100 z-80 flex flex-col bg-overlay border border-overlay-line" role="dialog" tabindex="-1" aria-labelledby="hs-pro-shco-label">
  
  <div class="py-3 px-6 flex justify-between items-center border-b border-overlay-divider">
    <h2 id="hs-pro-shco-label" class="font-medium text-foreground">
      Cart (3 items)
    </h2>
    <button type="button" class="py-1.5 px-2 inline-flex justify-center items-center gap-x-1 rounded-full bg-layer border border-layer-line text-xs text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Close" data-hs-overlay="#hs-pro-shco">
      <span class="hidden lg:block">Esc</span>
      <span class="block lg:hidden">Close</span>
      <svg class="shrink-0 size-4" 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"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
    </button>
  </div>

<div class="h-full overflow-y-auto overflow-hidden [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
    
    <div class="py-4 px-6 relative overflow-hidden bg-linear-to-r from-orange-100 via-purple-200 via-70% to-indigo-200 dark:from-orange-800 dark:via-purple-800 dark:to-indigo-800" role="alert" tabindex="-1" aria-labelledby="hs-pro-shfshal-label">
      <p id="hs-pro-shfshal-label" class="font-medium text-layer-foreground">
        Free shipping on orders over $50
      </p>
      <p class="mt-1 text-xs text-muted-foreground-1">
        <a class="font-medium text-xs text-layer-foreground underline underline-offset-4 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="../../../templates/ecommerce/storefront/login.html">Log In</a> or <a class="font-medium text-xs text-layer-foreground underline underline-offset-4 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="../../../templates/ecommerce/storefront/create-account.html">Register</a>
      </p>
    </div>

<div class="p-6 space-y-7">
      
      <div id="hs-pro-shcopci1" class="hs-removing:opacity-0 duration-300 flex gap-x-5">
        <div class="relative">
          <img class="shrink-0 w-20 h-28 object-cover rounded-lg" src="https://images.unsplash.com/photo-1699595749116-33a4a869503c?q=80&w=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
  
          <div class="absolute top-0 inset-e-0 z-10 pt-1 pe-1">
            <button type="button" class="size-5 flex justify-center items-center gap-x-1 rounded-full text-xs bg-layer border border-transparent text-layer-foreground hover:bg-layer disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer">
              <svg class="shrink-0 size-3" 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"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></svg>
              <span class="sr-only">Add to favorites</span>
            </button>
          </div>
        </div>

<div class="grow flex flex-col">
          <p class="text-sm text-foreground">
            Nike Air Force 1
          </p>

<ul class="mt-1.5 space-y-1">
            <li class="text-xs text-muted-foreground-1">
              Color: White
            </li>
            <li class="text-xs text-muted-foreground-1">
              Size: M
            </li>
          </ul>

<div class="">
            <button type="button" class="inline-flex items-center gap-x-1.5 text-[13px] text-foreground underline underline-offset-4 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" data-hs-remove-element="#hs-pro-shcopci1">
              Remove
            </button>
          </div>
        </div>
      </div>

<div id="hs-pro-shcopci2" class="hs-removing:opacity-0 duration-300 flex gap-x-5">
        <div class="relative">
          <img class="shrink-0 w-20 h-28 object-cover rounded-lg" src="https://images.unsplash.com/photo-1708443683334-1e41c52f33ac?q=80&w=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
  
          <div class="absolute top-0 inset-e-0 z-10 pt-1 pe-1">
            <button type="button" class="size-5 flex justify-center items-center gap-x-1 rounded-full text-xs bg-layer border border-transparent text-layer-foreground hover:bg-layer disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer">
              <svg class="shrink-0 size-3" 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"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></svg>
              <span class="sr-only">Add to favorites</span>
            </button>
          </div>
        </div>

<div class="grow flex flex-col">
          <p class="text-sm text-foreground">
            Camo Blend Jacket
          </p>

<ul class="mt-1.5 space-y-1">
            <li class="text-xs text-muted-foreground-1">
              Color: Camo
            </li>
            <li class="text-xs text-muted-foreground-1">
              Size: M
            </li>
          </ul>

<div class="">
            <button type="button" class="inline-flex items-center gap-x-1.5 text-[13px] text-foreground underline underline-offset-4 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" data-hs-remove-element="#hs-pro-shcopci2">
              Remove
            </button>
          </div>
        </div>
      </div>

<div id="hs-pro-shcopci3" class="hs-removing:opacity-0 duration-300 flex gap-x-5">
        <div class="relative">
          <img class="shrink-0 w-20 h-28 object-cover rounded-lg" src="https://images.unsplash.com/photo-1603218183500-7e1d62c3c679?q=80&w=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
  
          <div class="absolute top-0 inset-e-0 z-10 pt-1 pe-1">
            <button type="button" class="size-5 flex justify-center items-center gap-x-1 rounded-full text-xs bg-layer border border-transparent text-layer-foreground hover:bg-layer disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer">
              <svg class="shrink-0 size-3" 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"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></svg>
              <span class="sr-only">Add to favorites</span>
            </button>
          </div>
        </div>

<div class="grow flex flex-col">
          <p class="text-sm text-foreground">
            Mahabis Classic
          </p>

<div class="">
            <button type="button" class="inline-flex items-center gap-x-1.5 text-[13px] text-foreground underline underline-offset-4 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" data-hs-remove-element="#hs-pro-shcopci3">
              Remove
            </button>
          </div>
        </div>
      </div>
      
    </div>
  </div>

<div class="py-4 sm:py-6 px-6 border-t border-overlay-footer">
    
    <div class="mb-1 grid grid-cols-2 gap-2">
      <div>
        <p class="font-semibold text-layer-foreground">
          Subtotal
        </p>
      </div>
      <div class="text-end">
        <span class="font-semibold text-layer-foreground">$229</span>
      </div>
    </div>
    
    
    <p class="mb-3 sm:mb-5 text-[13px] text-muted-foreground-1">
      Shipping, taxes and discounts are calculated at checkout.
    </p>

<a class="py-3 px-4 w-full inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus" href="../../../templates/ecommerce/storefront/checkout.html">
        Checkout
      </a>
    </div>
  </div>
  
</div>

Open related storefront cart template