Cart inlinePro
A cart in a message: steppers, undo, a rolling subtotal, progress to free delivery and a checkout that names the total.
On this page
Installation
Usage
import { CartInline } from "@/components/ui/chatcn/pro/cart-inline"
<CartInline
lines={cart.lines}
onLinesChange={cart.set}
shipping={7.5}
freeShippingAt={400}
onCheckout={() => openCheckout()}
/>The minus on a stepper becomes a bin at one, so removing is the same motion as reducing. A removed line leaves Removed and Undo in its place until the next change. The subtotal rolls only the digits that change. With freeShippingAt, a thin line fills toward free delivery and names the exact amount left, then turns green. Lines can carry an issue such as Only 3 left, and max caps the plus. Pass onLinesChange to control the lines; without it the cart keeps its own copy.
Examples
States
Props
| Prop | Type | Notes |
|---|---|---|
lines, onLinesChange | { id, title, detail?, image?, price, quantity, max?, issue? }[] | Controlled when onLinesChange is set |
shipping, freeShippingAt | number | Delivery cost and the free threshold |
currency, locale | string | Prices format with Intl, tabular figures. Default USD, en-US |
onCheckout | (lines) => unknown | Promise<unknown> | Reject to show the error |
loading, disabled | boolean | States |
labels | Partial<CartInlineLabels> | Every string, for translation |
Keyboard
| Key | Action |
|---|---|
| Tab | Each stepper's buttons, Undo, then Check out |
| Enter or Space | Step the quantity |
Accessibility
- Each stepper is a group named for its product; its count is a polite live region.
- The minus is named Remove at one, One fewer above it.
- The free delivery line says the amount in words; the bar is decorative.
Motion
Changed digits in the subtotal roll in 300 ms. Lines and the Undo row fade up 4 px in 180 ms. The delivery bar scales in 300 ms. Steppers press to 0.97. Reduced motion swaps digits in place and keeps the fades.