Koala UI

Shopping Cart

The cart, as a page or as a slide-over. Both are live: change a quantity and the line total, subtotal, tax and free-shipping meter roll to the new figures; remove a line and it collapses out.

Variant 1

Pro

Variant 2

Pro

Built from#

The cart is the OrderSummary: its editable line parts (OrderSummaryItemQuantity, the NumberInput stepper, and OrderSummaryItemRemove, with the row's leaving exit) for the lines, and the card variant with totals, a promo InputGroup and a footer for the summary. Figures roll with AnimatedNumber; the meter is a Progress that turns success at the threshold. The slide-over is a right Drawer under a Navbar, and an empty cart falls back to an EmptyState.

Responsive#

Each preview renders inside an iframe, so the layout answers to the frame width. On the cart page the lines and the summary split at lg (the summary pins while a long cart scrolls) and stack below it. Each line keeps its quantity and remove controls under the product name rather than at the row's end, so on a phone the name keeps its measure. The slide-over fills a phone's width and caps to a panel on larger screens.

FAQ#

Both variants read one small cart hook: the lines, which of them are leaving, and setQty / remove / finalize. Back those with your store's cart API; the totals are derived from the lines, so they never drift from what is on screen.