Components

Mini Cart

A cart dropdown with line items, quantity steppers, a live subtotal and checkout.

php artisan blatui:add mini-cart

{{-- The `open` prop defaults the panel open so the contents are visible in the docs. --}}
<x-ui.mini-cart
    open
    :items="[
        ['name' => 'Aero Runner Sneakers', 'variant' => 'Size 42 / White', 'price' => 89.00, 'qty' => 1, 'image' => 'https://picsum.photos/seed/blatcart1/120/120'],
        ['name' => 'Merino Wool Beanie', 'variant' => 'Charcoal', 'price' => 24.50, 'qty' => 2, 'image' => 'https://picsum.photos/seed/blatcart2/120/120'],
        ['name' => 'Canvas Tote Bag', 'variant' => 'Natural', 'price' => 18.00, 'qty' => 1, 'image' => 'https://picsum.photos/seed/blatcart3/120/120'],
    ]"
/>

Empty

{{-- No items → the empty state. Opened by default so the empty panel is visible. --}}
<x-ui.mini-cart open :items="[]" />

API Reference

Props, slots and exposed methods for <x-ui.mini-cart>.

Props

Prop	Type	Default	Description
`items`	`array`	`[]`	The line items shown in the cart panel. Each item renders a thumbnail, name, variant, price, a quantity stepper, and a line total. See Each item below.
`currency`	`string`	`'$'`	The currency symbol prepended to all formatted prices.
`open`	`bool`	`false`	Whether the cart panel starts open. Mainly for demos and reviews; in normal use leave it closed and let the trigger toggle it.

Each item

Prop	Type	Default	Description
`name`*	`string`	—	The product name shown on the line item.
`price`*	`number`	—	The unit price. The line total and cart subtotal are computed from price times quantity.
`qty`	`int`	`1`	The starting quantity. Clamped to a minimum of 1; decrementing below 1 removes the item.
`variant`	`string`	—	An optional variant line (e.g. size or color) shown under the name.
`image`	`string`	—	An optional thumbnail URL. A placeholder icon is shown when omitted.

Methods

Available on the component's Alpine scope — call them from markup in the slot (e.g. @click="…").

Method	Description
`toggle()`	Opens the cart panel when closed, or closes it when open.
`openPanel()`	Opens the cart panel and moves focus into it.
`close(returnFocus = true)`	Closes the panel. Returns focus to the trigger button unless called with false.
`inc(item)`	Increases the given item's quantity by one.
`dec(item)`	Decreases the item's quantity by one, removing the item when it would drop below one.
`remove(id)`	Removes the line item with the given id from the cart.