Cart

The cart system includes a full cart context, atomic section components, and five mini-cart display variants that auto-open on add/remove.

---

Mini-Cart Variants

Pick one mini-cart variant — each wraps your cart layout and handles the overlay automatically.

Variant	Behavior
CartMiniDrawer	Slide-out from bottom
CartMiniSheet	Sheet overlay
CartMiniDialog	Centered modal
CartMiniPopover	Dropdown anchored to cart icon
CartMiniToast	Lightweight auto-dismiss notification

All variants auto-open when a product is added to or removed from the cart.

---

Drawer Example

<CartMiniDrawer>
  <CartIcon class="relative">
    <Button variant="ghost" size="icon">
      <ShoppingCartIcon />
    </Button>
  </CartIcon>

  <div class="p-4">
    <CartItems>
      <div class="flex flex-col gap-4">
        <CollectionView>
          <div class="flex items-center gap-3 py-2">
            <ProductImage class="size-16 rounded" />
            <div class="flex-1">
              <ProductName class="font-medium text-sm" />
              <ProductPrice class="text-primary font-semibold text-sm" />
            </div>
            <ProductRemoveFromCartTrigger class="size-8" />
          </div>
        </CollectionView>
      </div>

      <CartEmpty>
        <p>Your cart is empty</p>
      </CartEmpty>
    </CartItems>

    <CartSummary class="border-t pt-4 mt-4">
      <div class="flex justify-between mb-2">
        <span>Subtotal</span>
        <span class="font-semibold"><CartSubtotal /></span>
      </div>
      <CartCheckoutTrigger class="w-full" />
    </CartSummary>
  </div>
</CartMiniDrawer>

---

CartIcon

CartIcon renders the item count as a badge:

<CartIcon>
  <Button variant="ghost" size="icon" class="relative">
    <ShoppingCartIcon />
    <span class="absolute -top-1 -right-1 bg-primary text-primary-foreground text-xs rounded-full size-5 flex items-center justify-center">
      <CartCount />
    </span>
  </Button>
</CartIcon>

---

Empty State

CartEmpty renders when the cart has no items:

<CartItems>
  <div class="flex flex-col gap-4">
    <CollectionView>
      {/* item template */}
    </CollectionView>
  </div>
  <CartEmpty>
    <p>Your cart is empty</p>
  </CartEmpty>
</CartItems>

---

Cart Context

The cart provider is auto-mounted in the root layout. All components — CartMiniDrawer, CartIcon, triggers — read from the same shared context. No manual wiring needed.

// Anywhere in your storefront — always works
<ProductAddToCartTrigger />
<ProductRemoveFromCartTrigger />
<CartCount />

The mini-cart auto-opens whenever addProduct() or removeProduct() is called. No manual state management required.