cart-item-detailed

Cart Item Detailed

Cart lines with large thumbnails, the line total with any saving, quantity buttons and a remove action.

States: Default

Parts

Part	File	Does
CartItemDetailed	CartItemDetailed.vue	Lists the cart's items with price per unit, a quantity stepper and a remove button.

Styling

Part	Recipe
CartItemDetailed	cart-item-detailed
CartItemDetailed	cart-item-detailed-line
CartItemDetailed	cart-item-detailed-image
CartItemDetailed	cart-item-detailed-quantity
CartItemDetailed	section-title
CartItemDetailed	meta
CartItemDetailed	quiet-action

Install

Writes 3 files into components/templates/cart-item-detailed/. For agents, npx @frontic/ui docs cart-item-detailed prints this reference as markdown; the MCP server serves the same.

Installs with it: button; cart; format; image; price; separator
npm packages: @lucide/vue; reka-ui

Built from

Button Image Price Separator

API reference

CartItemDetailed CartItemDetailed.vue

Lists the cart's items with price per unit, a quantity stepper and a remove button.

Prop	Type	Default
maxQuantity	number	10

removeLabel	((name: string) => string)	`Remove ${name}`

decreaseLabel	string	'Decrease quantity'

increaseLabel	string	'Increase quantity'

eachLabel	((price: string) => string)	`${price} each`

locale	string	—

class	ClassValue	—

items	CartLine[]	[]

Event	Payload
update:items	value: CartLine[]

Recipe cart-item-detailed	Sets
base: cart-item-detailed	3 properties

Recipe cart-item-detailed-line	Sets
base: cart-item-detailed-line	1 property

Recipe cart-item-detailed-image	Sets
base: cart-item-detailed-image	4 properties · 3 inherited

Recipe cart-item-detailed-quantity	Sets
base: cart-item-detailed-quantity	3 properties

Recipe section-title	Sets
base: section-title	2 properties

Recipe meta	Sets
base: meta	3 properties

Recipe quiet-action	Sets
base: quiet-action	1 property

Example