shadcn.io is not affiliated with official shadcn/ui
Abandoned Cart Recovery Storefront Block for React
What changed since you went away: four items from an saved bag with then and now prices, a written change (Down, Same, Up), stock notes, Keep checkboxes, a derived subtotal and one Restore button.
Installation
Overview
Welcome a shopper back to a bag they set down, and say honestly what moved, with this cart recovery view for React with Base UI. A header names the shop, Pebble & Plum, and says what the block is. A hairline frame with a plus mark on each corner lists the four items that were in the bag, last open on Tue 6 Oct. Each row has a drawing, a Keep checkbox, the price it had then struck through, the price it has now, the change written as an arrow, a sign and a word ("Down $6.00", "Same price", "Up $4.00") and a stock note ("Low: 2 in stock"). The item that sold out can not be kept and says why in its own row. A sentence under the list says what changed, and the kept items' subtotal and its difference from when you went away are worked out in whole cents from the rows. "Restore 3 to the bag" is the one Shine Button. It's built from native checkboxes, Shine Button and Guides, with a CSS entrance only. For a return-to-cart page, a recovery email's landing page or a logged-in "pick up where you left off" panel.
FAQ
How do I fill it with my own bag?
Edit ITEMS: each has an id, a name, a variant, the was price when the bag was set down and the now price in whole cents, the stock now and a kind for its drawing. LOW is the stock at or below which a row says "Low". SET_DOWN and SET_DOWN_TEXT are the date the bag was last open. The change, the stock note, the sentence under the list and the subtotal are all derived.
What do Keep and drop do?
Keep is a checkbox per item; unticking it drops the item from the subtotal and from the Restore count without removing the row, so you can change your mind. A sold-out item is unticked and disabled, with its reason in the row. When nothing is kept the Restore button stays pressable and says to keep at least one item.
Why is every change written out?
Colour alone is not a signal: a direction arrow, a sign and a word ("Down", "Same price", "Up") say the same thing, and the old price is struck through with a hidden "Was" for screen readers. The block shows only changes it can derive from the two typed prices and the stock, and no urgency it cannot back up: there is no countdown and no "others are looking".
What stays local, and how do I wire it to a real bag?
Restore says "Restored 3 items in this demo" and puts nothing in a bag. Load the saved bag and today's prices and stock from your cart API, and replace restore with the call that adds the kept items, using the prices the server holds now. Never trust the was price shown here for charging.
How does it look on a phone?
Each row keeps the checkbox, the drawing and the name on the first line and puts the then and now prices and the change under the name. The sentence and subtotal stack, and the foot rides the bottom of the screen with Restore full width.
Is it accessible?
Each row is one label around a real checkbox, so the whole row is the target, and the checkbox is named by the row's text. The list is labelled, prices are written out, and a polite status line announces each keep or drop with the new count and subtotal. The drawn box has a visible focus ring.