> ## Documentation Index
> Fetch the complete documentation index at: /docs/llms.txt
> Use this file to discover all available pages before exploring further.

# <CartPanel />

> Slide-out panel displaying the current cart contents and order summary.

# CartPanel

<Snippet file="api-key-location.mdx" />

A slide-out side panel that shows all items in the customer's cart, order summary with subtotal/tax/total, and a checkout button.

## Preview

Desktop

Mobile

## Import

```tsx theme={null}
import { CartPanel } from '@/components/CartPanel'
```

## Usage

```tsx theme={null}
<CartPanel
  cart={cart}
  onUpdateItem={handleUpdateItem}
  onRemoveItem={handleRemoveItem}
  onCheckout={handleCheckout}
  isOpen={isCartOpen}
  onClose={() => setIsCartOpen(false)}
/>
```

## Props

**cart** `Cart` *required*

The cart object containing items, totals, and applied discounts.

**onUpdateItem** `(itemId: string, quantity: number) =\> void` *required*

Callback to update an item's quantity.

**onRemoveItem** `(itemId: string) =\> void` *required*

Callback to remove an item from the cart.

**onCheckout** `() =\> void` *required*

Callback fired when the checkout button is clicked.

**isOpen** `boolean` *required*

Controls the panel's open/closed state.

**onClose** `() =\> void` *required*

Callback to close the panel.

## Behavior

* Slides in from the right with backdrop overlay
* Each item row shows name, modifiers summary, quantity stepper, and line total
* Order summary section with subtotal, tax, discounts, and total
* Empty state with illustration and "Browse menu" CTA
* Traps focus when open for accessibility


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.