cart-compact

Cart Compact

A mini cart in a side sheet, with quantity controls, free-shipping progress, the subtotal and checkout.

States: Default

Parts

PartFileDoes
CartCompactCartCompact.vueOpens a side sheet with the cart's items, quantity controls, free-shipping progress and checkout.

Styling

PartRecipe
CartCompactpart-title-lg
CartCompacthint
CartCompactmeta
CartCompactnote-positive

Install

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

npm packages
@lucide/vue

Built from

API reference

CartCompact CartCompact.vue

Opens a side sheet with the cart's items, quantity controls, free-shipping progress and checkout.

PropTypeDefault
currencystring'EUR'
freeShippingThresholdnumber15000
title((count: number) => string)`Cart (${count})`
openLabelstring'Open cart'
countLabel((count: number) => string)count > 9 ? '9+' : String(count)
closeLabelstring'Close'
freeShippingProgressLabelstring'Add {amount} more for free shipping'
freeShippingReachedLabelstring'You qualify for free shipping!'
freeShippingProgressAriastring'Progress to free shipping'
subtotalLabelstring'Subtotal'
taxNotestring'Shipping and taxes calculated at checkout.'
checkoutLabelstring'Checkout'
continueLabelstring'Continue Shopping'
emptyTitlestring'Your cart is empty'
emptyTextstring'Add some items to get started.'
maxQuantitynumber—
removeLabel((name: string) => string)—
localestring—
classClassValue—
itemsCartLine[][]
openbooleanfalse
EventPayload
update:openvalue: boolean
checkoutitems: CartLine[]
update:itemsvalue: CartLine[]
Recipe part-title-lgSets
base: part-title-lg 4 properties
Recipe hintSets
base: hint 2 properties
Recipe metaSets
base: meta 3 properties
Recipe note-positiveSets
base: note-positive 1 property
Example