cart-summary

Cart Summary

Cart card with an item count, product lines with images and line totals, subtotal, shipping and savings rows, the total with its tax note, and a secure checkout button.

States: Default

Parts

Part	File	Does
CartSummary	CartSummary.vue	Shows the cart's lines with subtotal, shipping and total, and a button to check out.

Styling

Part	Recipe
CartSummary	hint
CartSummary	heading
CartSummary	meta

Install

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

Installs with it: badge; button; card; cart; image; item; price; separator
npm packages: @lucide/vue

Built from

Badge Button Card Image Item Price Separator

API reference

CartSummary CartSummary.vue

Shows the cart's lines with subtotal, shipping and total, and a button to check out.

Prop	Type	Default
lines*	CartLine[]	—

title	string	'Your cart'

description	string	—

currency	string	'EUR'

shippingCents	number	0

countLabel	((count: number) => string)	`${count} ${count === 1 ? 'item' : 'items'}`

quantityLabel	((quantity: number) => string)	`Qty ${quantity}`

subtotalLabel	string	'Subtotal'

shippingLabel	string	'Shipping'

freeShippingLabel	string	'Free'

savingsLabel	string	'You save'

totalLabel	string	'Total'

taxNote	string	'Incl. VAT'

checkoutLabel	string	'Secure checkout'

locale	string	—

surface	'raised' \| 'bare'	'raised'

class	ClassValue	—

Event	Payload
checkout	—

Data attribute	Values
data-surface	'raised' \| 'bare'

Recipe hint	Sets
base: hint	2 properties

Recipe heading	Sets
base: heading	1 property

Recipe meta	Sets
base: meta	3 properties

Example