shadcn.io is not affiliated with official shadcn/ui
Abandoned Cart Recovery Checkout Block for Solid
A returning shopper's last step: what the shop kept (cart, address, delivery) and what it never kept (the card), what changed in the cart since it was saved, the cart folded under its total, Resume at payment and a Forget this cart that clears it.
Installation
Overview
Bring a shopper back to the step they stopped at without pressure, with this cart recovery for Solid with Ark UI. A compact header from Mistletoe Row, a shop for festive decorations, welcomes them back. Inside a hairline frame with a plus mark on each corner, a first band lists what the shop kept, each with a check and the word "kept": the cart, the shipping address and the delivery choice with its arrival date. The card is the one item marked with a minus and "never kept", because it is entered again at payment. A second band says what changed while the cart waited, worked out from the saved lines and today's prices and stock: one price that moved and one quantity cut to what is on the shelf. The cart itself folds under a Collapsible that shows the item count and today's total, and opens to the lines with a drawn thumbnail, a flag in words and the saved total beside the new one. The foot has a polite status line, Resume at payment as the only Shine Button, and a ghost Button that forgets the cart. Forgetting swaps the panel for an Empty state at the same height, with a way to put the cart back. There is no countdown, no "last seen" time and no made-up discount. It's built from Badge, Button, Collapsible, Empty, Shine Button and Guides, with a CSS entrance only. For win-back pages, saved-cart reminders and the return step of any checkout.
FAQ
How do I feed it a real saved cart?
Edit LINES and KEEPS at the top. A line has the quantity and price it was saved with (savedQty, savedUnit) beside today's unit price and stock; the quantity shown is the smaller of what was saved and what is in stock, the changes list is worked out by comparing the two, and the totals are sums in whole cents, so nothing is typed twice. KEEPS is the list of things your shop stores, each with a kept flag and a detail line.
Why is there no countdown, discount or last-seen time?
A recovery page that pressures people is a dark pattern, and a made-up discount teaches shoppers to abandon carts. This one only reports what is true: what was kept, what is different today and what you will have to enter again. Dates are fixed in the file, so the same words appear on every load, and the saved total is shown next to today's so a price rise is never hidden.
Why does it say the card is never kept?
Card numbers should live with your payment provider, not in your cart. The panel says so plainly, with a minus and the words "never kept", so the shopper knows to expect the card field at payment. In a real shop the check or the minus on each row should come from what your system actually stores.
What does Forget this cart do, and how do I get the cart back?
It clears the panel in this demo only, replaces the lists with an empty state of the same height so nothing below moves, says "Cleared in this demo" in the status line and moves focus to Put the cart back. In your app it should call the endpoint that deletes the saved cart and its address and delivery choice. Resume at payment stays in place but says there is nothing to resume until the cart is back.
How does it look on a phone?
The rows keep their mark, title and detail on one line each and the cart lines keep the thumbnail, the quantity and the line total. The foot is pinned to the bottom of the screen while you scroll, with Resume at payment and Forget this cart side by side, and settles at the end of the panel from the medium breakpoint.
What stays local, and how do I wire it up?
Everything: nothing is ordered, charged or deleted, and Resume at payment only says that payment comes next. In your app load the saved cart and what changed from your cart API, make Resume a link to the payment step with the cart id, and send Forget to the API that deletes it.