Cart Item

Pro

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.

Preview

Installation

npx @lumioui/cli add pro/cart-item

Usage

import { CartItem } from "@/components/ui/cart-item/cart-item";
<CartItem />

Examples

Shopping bag

A menswear bag, in ink.

Delivery cart

A food-delivery cart, orange.

API reference

Prop Type Default
title* string

Product name.

 —
price* number

Unit price in major units.

 —
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.

 —
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.

 true
quantity number

Controlled quantity.

 —
defaultQuantity number

Uncontrolled initial quantity. Default 1.

 1
onQuantityChange (quantity: number) => void —
maxQuantity number

Max per order — the stepper nudges past it. Default 10.

 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.

 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".

 "Save for later"
note string

Status line under the options — "Only 2 left", "Arrives Thu".

 —
noteTone "default" | "warning" | "success"

Note colour + glyph. Default "default".

 "default"
unavailable boolean

No longer purchasable — dims the row, hides the stepper, shows "Unavailable".

 false
layout "default" | "compact"

"default" (fashion bag, 4:5 thumb + action row) or "compact" (delivery cart, square thumb). Default "default".

 "default"
format FormatPriceOptions

Money formatting (currency symbol, decimals).

 —
className string —