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.

Create a responsive UI block named "Shopping Cart Drawer with Line Items and Checkout Actions" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/ecommerce/cart-drawers/#shopping-cart-drawer-with-line-items-and-checkout-actions. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Build only this source block. Do not add unrelated page chrome, marketing sections, dashboard widgets, extra cards, extra modals, placeholder states, or footer content unless they are present in the source block.

Source metadata:
- Catalog family: ecommerce/cart-drawers
- Block ID: shopping-cart-drawer-with-line-items-and-checkout-actions
- Source description: Right-side cart drawer combines a login prompt, stacked mini line items, subtotal copy, and paired cart and checkout buttons.
- Preview iframe: https://preline.co/blocks/ecommerce/cart-drawers/iframes/pro/shopping-cart-drawer-with-line-items-and-checkout-actions.html (repo path: blocks/ecommerce/cart-drawers/iframes/pro/shopping-cart-drawer-with-line-items-and-checkout-actions.html)
- Source markup reference:
  - partials/pro/storefront/offcanvas/cart.html
  - partials/pro/sources/overlay-header.html
  - partials/pro/storefront/layouts-components/alert-login-register.html
  - partials/pro/storefront/sources/mini-product-listing.html

Use the source HTML tab and referenced partials as the source of truth. Preserve exact visible copy, content order, hierarchy, component density, spacing relationships, borders, radii, icons, status markers, dropdown/menu rows, form states, responsive order, and interaction content. If the source imports shared partials or assets, reuse those local components/assets when the destination can import them; otherwise recreate their visible structure faithfully from the source.

Block-specific fidelity rules:
- Preserve trigger geometry, open panel placement, grouping, row order, scroll container, overlay/backdrop behavior, z-index, active/current states, and keyboard/focus semantics.
- Do not simplify grouped or nested menus, drawers, popovers, and modals into flat generic lists or default forms unless the source does.
- Preserve product, payment, authentication, and commerce source assets exactly: images, avatars, payment marks, app/channel icons, store/product media, progress states, and trust/status elements.
- Do not replace branded/source visuals with initials, emojis, generic icons, generated placeholders, or different stock images.
- Source content inventory (from the source markup):
  - Right-docked drawer: `hs-overlay` panel that is `hidden` and `translate-x-full` by default, `hs-overlay-open:translate-x-0`, `size-full sm:w-100`, `fixed top-0 inset-e-0 z-80`, `flex flex-col`, `transition-all duration-300`, `role="dialog"`; the demo's `Open` button and the auto-open-on-load script are iframe chrome, not part of the block.
  - Header reads `Cart (3 items)` and its close control is a pill button, not a bare icon: it shows `Esc` from `lg` up and `Close` below `lg`, plus an X icon, with `aria-label="Close"` and `data-hs-overlay` pointing at the drawer.
  - Directly under the header sits a full-bleed gradient alert (`bg-linear-to-r from-orange-100 via-purple-200 via-70% to-indigo-200`) reading `Free shipping on orders over $50` with a second line `Log In or Register` whose two words are underlined links.
  - The scrolling body holds exactly 3 mini line items in order, each with a `w-20 h-28 object-cover rounded-lg` photo: `Nike Air Force 1` (`Color: White`, `Size: M`, `Qty: 1`, price `$149`), `Camo Blend Jacket` (`Color: Camo`, `Size: M`, `Qty: 1`, struck-through `$60` beside red `$40`), `Mahabis Classic` (`Color: White`, `Size: M`, `Qty: 1`, price `$40`).
  - Every line item has a `size-5` circular heart overlay on its photo labelled `Add to favorites` and an underlined `Remove` text button wired with `data-hs-remove-element` at that item's own id; each row carries `hs-removing:opacity-0 duration-300`.
  - Quantities are static text (`Qty: 1`), not selects, and the source's optional `Just this one` / `Order every:` subscription radio group does not render in this block.
  - The footer shows a two-column `Subtotal` / `$229` line, the note `Shipping, taxes and discounts are calculated at checkout.`, then two equal-width side-by-side links: neutral `View cart (3)` and primary `Checkout`.

Token and Tailwind rules:
- Treat source token classes as semantic roles, not fixed class names to blindly copy.
- Map every source `primary` role to the destination project's current primary token/config/CSS variable. Active links, checked states, progress lines, focus rings, primary gradients, logo primary fills/strokes, and primary buttons must share that destination primary color.
- Do not hardcode Preline blue or emit `text-blue-*`, `bg-blue-*`, `border-blue-*`, `fill-blue-*`, `stroke-blue-*`, `from-blue-*`, `via-blue-*`, `to-blue-*`, or fixed blue hex/rgb values for primary roles unless the destination primary is explicitly blue.
- Before using source-only token classes such as `text-foreground-inverse`, `bg-layer`, `border-layer-line`, `bg-navbar`, `border-line-2`, `bg-dropdown`, or similar Preline tokens, inspect the destination Tailwind config, global CSS/theme variables, and existing components for an equivalent utility/token.
- Prefer existing destination utilities such as `text-white`, `text-primary-foreground`, `text-foreground`, `text-muted-foreground`, `bg-background`, `bg-card`, `bg-popover`, `border-border`, `bg-muted`, `bg-accent`, `ring-ring`, or app-specific tokens when they match the source role.
- If no equivalent exists, add the smallest project-appropriate token or utility before using it. Do not leave undefined source classes in the generated markup.

Asset and icon rules:
- Use exact source images, avatars, product media, branded SVGs, payment marks, channel logos, and app icons when the source provides them.
- Do not replace source assets with initials, emojis, generic icons, generated placeholders, or different stock media.
- Ordinary interface icons should match the destination icon system. If the project uses Lucide-style outline icons, keep the 24 viewBox, `fill="none"`, `stroke="currentColor"`, rounded caps/joins, and source stroke widths.
- Brand/source SVG shape is fixed content. Only map semantic colors such as primary fill/stroke to the destination token.

Behavior and accessibility:
- Preserve source interactions: links, buttons, dropdowns, tooltips, tabs, menus, drawers, modals, toggles, search, filters, form controls, validation states, loading/empty states, and open/closed defaults.
- For source behavior powered by Preline JS or a third-party package, inspect installed dependencies and existing primitives first. Reuse a destination primitive only when it can preserve the source geometry, states, accessibility, and behavior.
- Treat new dependencies as allowed by default unless the user, repository instructions, or package policy explicitly prohibit them. When no faithful equivalent exists, install/use the Preline UI runtime/plugin or the exact source third-party package; do not silently substitute ad hoc JavaScript or custom React state.
- Only under an explicit dependency prohibition may you implement a scoped framework-native equivalent. It must preserve keyboard and focus management, placement and layering, responsive behavior, and accessibility; static or simplified approximations are not acceptable.
- Use semantic HTML and accessible names. Keep `aria-current`, `aria-expanded`, `aria-haspopup`, `role`, labels, focus states, and keyboard behavior when the source exposes them or the destination primitive requires them.
- Desktop and mobile states must not overlap text, clip controls, or shift layout unexpectedly. Controls with icons, counters, badges, and labels should keep stable dimensions across hover/focus/active states.

Final QA:
- Compare the result against the source preview and HTML tab.
- Verify primary color follows the destination project, not Preline's default blue.
- Verify all emitted classes exist in the destination or are added deliberately.
- Verify responsive layout, focus states, dropdown/popover layering, long-text truncation, and source asset paths.
- Keep the final implementation scoped to this block and avoid unrelated refactors.

<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