## Cart Line Item (S—135)

Cart rows with quantity steppers and Remove that collapses the row behind an Undo bar for a few seconds.

- URL: https://sundaeui.dev/components/cart-line
- Category: Checkout & payments · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/cart-line.json`
- Tags: undo, quantity, cart, line-item, remove, e-commerce

Each row shows a thumbnail tile, name, variant and a line total that animates when quantity changes. Removing a row collapses it into a slim “Removed · Undo” bar with a countdown, then it is gone.
The subtotal at the bottom always reflects what is still in the cart.

### Usage

```tsx
import { CartLine } from '@/components/sundae/cart-line'

<CartLine />
```

### Props

- `items` (`{ id: string; name: string; variant: string; price: number; qty: number }[]`, required): Lines; price in cents.
- `onChange` (`(items) => void`): Called with the cart after a change.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Carts, order editors, bag drawers.

### When not to use

- Read-only order summaries.

### Accessibility

- Quantity uses labelled buttons; removal and undo are announced politely.
- Reduced motion removes the movement and keeps every state change.