# Cart Item

Cart line with thumbnail, options, quantity stepper and line total. Removing an item offers a quick Undo before the row closes, and saving for later lifts the item away.

> Composed · Pro · Data Display — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/cart-item
```

## Import

```tsx
import { CartItem } from "@/components/ui/cart-item/cart-item";
```

## Variants

- `bag` — Shopping bag: `npx @lumioui/cli add pro/cart-item-bag`
- `delivery` — Delivery cart: `npx @lumioui/cli add pro/cart-item-delivery`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `title` | `string` | Product name. |
| `brand?` | `string` | Brand / maker line above the title, e.g. "Okabe Studio". |
| `options?` | `string[]` | Chosen options, joined with " · " — ["US 10", "Bone / Gum"]. |
| `image?` | `string` | Thumbnail URL. |
| `thumbnail?` | `React.ReactNode` | Custom thumbnail node (icon tile, illustration) — overrides `image`. |
| `price` | `number` | Unit price in major units. |
| `compareAt?` | `number` | Unit compare-at price — line total is struck through beside the price. |
| `lineTotal?` | `boolean` | Show price × quantity (true) or the unit price (false). Default true. |
| `quantity?` | `number` | Controlled quantity. |
| `defaultQuantity?` | `number` | Uncontrolled initial quantity. Default 1. |
| `onQuantityChange?` | `(quantity: number) => void` | — |
| `maxQuantity?` | `number` | Max per order — the stepper nudges past it. Default 10. |
| `onRemove?` | `() => void` | Remove action. The row dims under an Undo pill, closes, then this fires. Omit to hide the action. |
| `undoWindow?` | `number` | How long the Undo pill holds before a removed row closes (ms). 0 closes straight away. Default 4000. |
| `onSaveForLater?` | `() => void` | Save-for-later action. The thumbnail lifts away, the row closes, then this fires. Omit to hide. |
| `saveLabel?` | `string` | Label for the save action. Default "Save for later". |
| `note?` | `string` | Status line under the options — "Only 2 left", "Arrives Thu". |
| `noteTone?` | `"default" | "warning" | "success"` | Note colour + glyph. Default "default". |
| `unavailable?` | `boolean` | No longer purchasable — dims the row, hides the stepper, shows "Unavailable". |
| `layout?` | `"default" | "compact"` | "default" (fashion bag, 4:5 thumb + action row) or "compact" (delivery cart, square thumb). Default "default". |
| `format?` | `FormatPriceOptions` | Money formatting (currency symbol, decimals). |
| `className?` | `string` | — |

## Icons rendered

- `truck` — /icons.html?i=truck
- `clock` — /icons.html?i=clock
- `check-circle` — /icons.html?i=check-circle
- `package` — /icons.html?i=package
- `trash` — /icons.html?i=trash

Source: https://lumioui.com/components/cart-item