Cart

Shopping cart with header, item list, quantity controls, summary totals, actions, empty state, and glass variant.

Basic Cart

Preview

Carrito 3

Café Espresso
€2.50 / ud
2

€5.00
Tostada Integral con Aguacate
Sin gluten €4.50 / ud
1

€4.50

Subtotal €9.50

Descuento -€0.50

Total €9.00

<div class="cart cart-bordered" style="max-width: 400px; height: 500px;">
  <div class="cart-header">
    <h3 class="cart-title">
      Carrito
      <span class="cart-count">3</span>
    </h3>
    <button class="cart-clear">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6h14z"/></svg>
      Vaciar
    </button>
  </div>
  <div class="cart-items">
    <ul class="cart-items-list">
      <li class="cart-item">
        <div class="cart-item-image-placeholder">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/></svg>
        </div>
        <div class="cart-item-content">
          <p class="cart-item-name">Café Espresso</p>
          <span class="cart-item-unit-price">€2.50 / ud</span>
          <div class="cart-item-qty">
            <button class="cart-item-qty-btn">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14"/></svg>
            </button>
            <span class="cart-item-qty-value">2</span>
            <button class="cart-item-qty-btn">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
            </button>
          </div>
        </div>
        <span class="cart-item-price">€5.00</span>
        <button class="cart-item-remove">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
        </button>
      </li>
      <li class="cart-item">
        <div class="cart-item-image-placeholder">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/></svg>
        </div>
        <div class="cart-item-content">
          <p class="cart-item-name">Tostada Integral con Aguacate</p>
          <span class="cart-item-meta">Sin gluten</span>
          <span class="cart-item-unit-price">€4.50 / ud</span>
          <div class="cart-item-qty">
            <button class="cart-item-qty-btn">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14"/></svg>
            </button>
            <span class="cart-item-qty-value">1</span>
            <button class="cart-item-qty-btn">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
            </button>
          </div>
        </div>
        <span class="cart-item-price">€4.50</span>
        <button class="cart-item-remove">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
        </button>
      </li>
    </ul>
  </div>
  <div class="cart-summary">
    <div class="cart-summary-row">
      <span class="cart-summary-label">Subtotal</span>
      <span class="cart-summary-value">€9.50</span>
    </div>
    <div class="cart-summary-row cart-summary-row-discount">
      <span class="cart-summary-label">Descuento</span>
      <span class="cart-summary-value">-€0.50</span>
    </div>
    <div class="cart-summary-row cart-summary-row-total">
      <span class="cart-summary-label">Total</span>
      <span class="cart-summary-value">€9.00</span>
    </div>
  </div>
  <div class="cart-actions">
    <button class="btn color-primary" style="width:100%;">Pagar €9.00</button>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col h-[500px] overflow-hidden bg-base-100 rounded-box border border-base-300" style="max-width: 400px;">
  <div class="flex items-center justify-between shrink-0 px-6 py-4 bg-base-100 border-b border-base-300">
    <h3 class="flex items-center gap-2 text-lg font-semibold m-0">
      Carrito
      <span class="inline-flex items-center justify-center text-sm font-semibold min-w-6 h-6 px-1 bg-primary text-primary-content rounded-full">3</span>
    </h3>
    <button class="flex items-center gap-1 text-sm bg-transparent border-none cursor-pointer px-2 py-1 rounded text-error hover:bg-error/10">
      Vaciar
    </button>
  </div>
  <div class="flex-1 overflow-y-auto">
    <!-- Cart items here (flex layout with image, content, price, qty controls) -->
  </div>
  <div class="shrink-0 px-6 py-4 bg-base-200 border-t border-base-300">
    <div class="flex justify-between mb-2 text-sm text-base-content/60">
      <span>Subtotal</span><span>€9.50</span>
    </div>
    <div class="flex justify-between mb-2 text-sm text-success">
      <span>Descuento</span><span>-€0.50</span>
    </div>
    <div class="flex justify-between pt-4 mt-2 border-t-2 border-base-300 font-semibold">
      <span>Total</span><span class="text-xl font-bold text-primary">€9.00</span>
    </div>
  </div>
  <div class="flex flex-col gap-2 shrink-0 px-6 py-4 border-t border-base-300">
    <button class="btn color-primary w-full">Pagar €9.00</button>
  </div>
</div>

Requires: tw.min.css

// Quantity controls
document.querySelectorAll('.cart-item-qty-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const qtyEl = btn.parentElement.querySelector('.cart-item-qty-value');
    let qty = parseInt(qtyEl.textContent);
    if (btn.querySelector('path[d*="M12 5v14"]')) qty++; // plus
    else qty = Math.max(1, qty - 1); // minus
    qtyEl.textContent = qty;
    // Recalculate totals...
  });
});

// Remove item
document.querySelectorAll('.cart-item-remove').forEach(btn => {
  btn.addEventListener('click', () => btn.closest('.cart-item').remove());
});

Empty Cart

Preview

Carrito

Carrito vacío

Añade productos para comenzar

<div class="cart cart-bordered" style="max-width: 400px; height: 400px;">
  <div class="cart-header">
    <h3 class="cart-title">Carrito</h3>
  </div>
  <div class="cart-empty">
    <svg class="cart-empty-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
      <circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/>
      <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/>
    </svg>
    <h4 class="cart-empty-title">Carrito vacío</h4>
    <p class="cart-empty-text">Añade productos para comenzar</p>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col h-[400px] overflow-hidden bg-base-100 rounded-box border border-base-300" style="max-width: 400px;">
  <div class="flex items-center justify-between shrink-0 px-6 py-4 border-b border-base-300">
    <h3 class="text-lg font-semibold m-0">Carrito</h3>
  </div>
  <div class="flex flex-col items-center justify-center text-center flex-1 p-10">
    <svg class="w-16 h-16 mb-4 text-base-content/40" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
      <circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/>
      <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/>
    </svg>
    <h4 class="text-lg font-semibold m-0 mb-1">Carrito vacío</h4>
    <p class="text-sm text-base-content/60 m-0">Añade productos para comenzar</p>
  </div>
</div>

Requires: tw.min.css

// No JS needed for empty state — it's CSS only

Mini Cart

Preview

Resumen 2

Café Espresso

€2.50
Tostada

€1.80

Total €4.30

<div class="cart cart-bordered cart-mini">
  <div class="cart-header">
    <h3 class="cart-title">
      Resumen
      <span class="cart-count">2</span>
    </h3>
  </div>
  <div class="cart-items">
    <ul class="cart-items-list">
      <li class="cart-item cart-item-compact">
        <div class="cart-item-image-placeholder">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/></svg>
        </div>
        <div class="cart-item-content">
          <p class="cart-item-name">Café Espresso</p>
        </div>
        <span class="cart-item-price">€2.50</span>
      </li>
      <li class="cart-item cart-item-compact">
        <div class="cart-item-image-placeholder">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/></svg>
        </div>
        <div class="cart-item-content">
          <p class="cart-item-name">Tostada</p>
        </div>
        <span class="cart-item-price">€1.80</span>
      </li>
    </ul>
  </div>
  <div class="cart-summary">
    <div class="cart-summary-row cart-summary-row-total">
      <span class="cart-summary-label">Total</span>
      <span class="cart-summary-value">€4.30</span>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col border border-base-300 rounded-box bg-base-100 overflow-hidden" style="max-width: 320px; max-height: 400px;">
  <div class="flex items-center justify-between px-4 py-3 border-b border-base-200">
    <h3 class="text-base font-bold m-0">Resumen <span class="text-sm font-medium text-base-content/50 ml-1">2</span></h3>
  </div>
  <div class="flex-1 overflow-y-auto">
    <div class="flex items-center gap-2.5 px-3 py-2 border-b border-base-200">
      <div class="w-8 h-8 rounded bg-base-200 flex items-center justify-center text-base-content/30 shrink-0">
        <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/></svg>
      </div>
      <p class="text-sm flex-1 m-0">Café Espresso</p>
      <span class="text-sm font-semibold">€2.50</span>
    </div>
    <div class="flex items-center gap-2.5 px-3 py-2 border-b border-base-200">
      <div class="w-8 h-8 rounded bg-base-200 flex items-center justify-center text-base-content/30 shrink-0">
        <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/></svg>
      </div>
      <p class="text-sm flex-1 m-0">Tostada</p>
      <span class="text-sm font-semibold">€1.80</span>
    </div>
  </div>
  <div class="flex justify-between items-center px-4 py-3 border-t border-base-300 bg-base-200">
    <span class="text-sm font-medium text-base-content/60">Total</span>
    <span class="text-lg font-bold">€4.30</span>
  </div>
</div>

Requires: tw.min.css

// No additional JS for mini cart

Glass

Preview

Carrito 1

Café Latte
€3.00 / ud
€3.00

Total €3.00

<div style="background: linear-gradient(135deg, #667eea, #764ba2); padding: 1.5rem; border-radius: 0.75rem;">
  <div class="cart glass" style="max-width: 400px; height: 350px;">
    <div class="cart-header">
      <h3 class="cart-title">Carrito <span class="cart-count">1</span></h3>
    </div>
    <div class="cart-items">
      <ul class="cart-items-list">
        <li class="cart-item">
          <div class="cart-item-image-placeholder">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/></svg>
          </div>
          <div class="cart-item-content">
            <p class="cart-item-name">Café Latte</p>
            <span class="cart-item-unit-price">€3.00 / ud</span>
          </div>
          <span class="cart-item-price">€3.00</span>
        </li>
      </ul>
    </div>
    <div class="cart-summary">
      <div class="cart-summary-row cart-summary-row-total">
        <span class="cart-summary-label">Total</span>
        <span class="cart-summary-value">€3.00</span>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div style="background: linear-gradient(135deg, #667eea, #764ba2); padding: 1.5rem; border-radius: 0.75rem;">
  <div class="glass rounded-box flex flex-col overflow-hidden" style="max-width: 400px; height: 350px;">
    <div class="flex items-center justify-between p-4 border-b" style="border-color: rgba(255,255,255,0.12);">
      <h3 class="text-lg font-bold text-white m-0">Carrito <span class="text-sm font-medium text-white/60 ml-1">1</span></h3>
    </div>
    <div class="flex-1 overflow-y-auto">
      <div class="flex items-center gap-3 p-4 border-b" style="border-color: rgba(255,255,255,0.08);">
        <div class="w-10 h-10 rounded-lg flex items-center justify-center text-white/40" style="background: rgba(255,255,255,0.1);">
          <svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/></svg>
        </div>
        <div class="flex-1 min-w-0">
          <p class="text-sm font-medium text-white m-0">Café Latte</p>
          <span class="text-xs text-white/50">€3.00 / ud</span>
        </div>
        <span class="text-sm font-semibold text-white">€3.00</span>
      </div>
    </div>
    <div class="p-4 border-t" style="border-color: rgba(255,255,255,0.12);">
      <div class="flex justify-between items-center">
        <span class="text-sm font-medium text-white/70">Total</span>
        <span class="text-xl font-bold text-white">€3.00</span>
      </div>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JS needed — glass is CSS only