Vibedex.io
Back to gallery
cardsIntermediate

Mini Cart

A compact shopping cart panel with line items and a checkout total.

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a mini shopping cart with Tailwind: a vertical card with a header, a list of line items (thumbnail, name + variant, qty stepper, price), a divider, a total row, and a primary 'Checkout' button. Slides in from the right in real apps; here just render the panel.

Code

html
<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/marketing/carts/1.html
  License: MIT
  Surfaced via https://vibedex.io/components/hyperui-marketing-cart
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
  <div class="flex justify-end p-6 w-full">
<div
      class="relative w-screen max-w-sm border border-gray-600 bg-gray-100 px-4 py-8 sm:px-6 lg:px-8"
      aria-modal="true"
      role="dialog"
      tabindex="-1"
    >
      <button class="absolute end-4 top-4 text-gray-600 transition hover:scale-110">
        <span class="sr-only">Close cart</span>

        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="size-5"
        >
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>

      <div class="mt-4 space-y-6">
        <ul class="space-y-4">
          <li class="flex items-center gap-4">
            <img
              src="https://images.unsplash.com/photo-1618354691373-d851c5c3a990?auto=format&fit=crop&q=80&w=1160"
              alt=""
              class="size-16 rounded-sm object-cover"
            />

            <div>
              <h3 class="text-sm text-gray-900">Basic Tee 6-Pack</h3>

              <dl class="mt-0.5 space-y-px text-[10px] text-gray-600">
                <div>
                  <dt class="inline">Size:</dt>
                  <dd class="inline">XXS</dd>
                </div>

                <div>
                  <dt class="inline">Color:</dt>
                  <dd class="inline">White</dd>
                </div>
              </dl>
            </div>
          </li>

          <li class="flex items-center gap-4">
            <img
              src="https://images.unsplash.com/photo-1618354691373-d851c5c3a990?auto=format&fit=crop&q=80&w=1160"
              alt=""
              class="size-16 rounded-sm object-cover"
            />

            <div>
              <h3 class="text-sm text-gray-900">Basic Tee 6-Pack</h3>

              <dl class="mt-0.5 space-y-px text-[10px] text-gray-600">
                <div>
                  <dt class="inline">Size:</dt>
                  <dd class="inline">XXS</dd>
                </div>

                <div>
                  <dt class="inline">Color:</dt>
                  <dd class="inline">White</dd>
                </div>
              </dl>
            </div>
          </li>

          <li class="flex items-center gap-4">
            <img
              src="https://images.unsplash.com/photo-1618354691373-d851c5c3a990?auto=format&fit=crop&q=80&w=1160"
              alt=""
              class="size-16 rounded-sm object-cover"
            />

            <div>
              <h3 class="text-sm text-gray-900">Basic Tee 6-Pack</h3>

              <dl class="mt-0.5 space-y-px text-[10px] text-gray-600">
                <div>
                  <dt class="inline">Size:</dt>
                  <dd class="inline">XXS</dd>
                </div>

                <div>
                  <dt class="inline">Color:</dt>
                  <dd class="inline">White</dd>
                </div>
              </dl>
            </div>
          </li>
        </ul>

        <div class="space-y-4 text-center">
          <a
            href="#"
            class="block rounded-sm border border-gray-600 px-5 py-3 text-sm text-gray-600 transition hover:ring-1 hover:ring-gray-400"
          >
            View my cart (2)
          </a>

          <a
            href="#"
            class="block rounded-sm bg-gray-700 px-5 py-3 text-sm text-gray-100 transition hover:bg-gray-600"
          >
            Checkout
          </a>

          <a
            href="#"
            class="inline-block text-sm text-gray-500 underline underline-offset-4 transition hover:text-gray-600"
          >
            Continue shopping
          </a>
        </div>
      </div>
    </div>
  </div>
</div>