Cart
Shopping cart with header, item list, quantity controls, summary totals, actions, empty state, and glass variant.
Basic Cart
Preview
Carrito 3
-
€5.00
Café Espresso
€2.50 / ud2 -
€4.50
Tostada Integral con Aguacate
Sin gluten €4.50 / ud1
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
-
€2.50
Café Espresso
-
€1.80
Tostada
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
-
€3.00
Café Latte
€3.00 / ud
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