shadcn.io is not affiliated with official shadcn/ui
Save for Later Checkout Block for React
A cart split into two lists: In your cart and a collapsible Saved for later, each row with one button that moves it across, notes worked out from data (price drops, stock) and counts, a subtotal and a status line that follow every move.
Installation
Overview
Let people park an item and decide later, with this save for later cart for React with Base UI. A compact header from Nibwold, a desk stationery shop, sits over a hairline frame with a plus mark on each corner, split into two cells on a divider. The first is In your cart (2): a row per item with a drawn thumbnail, its name and price, its variant and a ghost Save for later. The second is a Collapsible, Saved for later (3), with the same rows and a Move to cart, each saved item carrying a note in words worked out from its data: "Price dropped $4.00 since 12 Oct", "Only 2 remain", "No change since 9 Oct". A move updates both lists, both counts and the subtotal (which counts to its new value with Counting Number), keeps focus on the same item in its new list and says it in a polite status line ("Moved Walnut desk lamp to your cart"). Either list can empty into an Empty state without the panel changing height. Check out, the only Shine Button, is in the foot. On a phone the lists stack and each Move button becomes a full-width ghost button under its row. It's built from Collapsible, Empty, Counting Number, Button, Shine Button and Guides, with a CSS entrance only. For carts, baskets and any list where the buyer says not yet.
FAQ
How do I fill it with my own items?
Edit ITEMS at the top. Each has an id, a name, a variant, a price and a was price in whole cents, a stock count (0 when you don't say), the ISO day it was set aside (since) and which list it starts in (place). The notes are worked out from those: a was above the price reads "Price dropped", a stock of three or fewer reads "Only N remain", anything else says nothing has changed since the day it was saved. Counts and the subtotal come from whichever items are in the cart.
What happens when I move an item?
The item leaves one list and joins the other at once, both headings and the subtotal update, and the polite status line names the item, where it went and the new subtotal. Focus stays on the same item's button in its new list, so you can keep going from the keyboard. Moving an item to Saved for later opens that list if it was closed, so the item is not lost from sight. The Move buttons are named for their item ("Save Brass fountain pen for later").
Why doesn't the panel change height?
The two lists are in a grid, and each list's region keeps the height of all five rows from the medium breakpoint, so moving items between them, emptying the cart or closing the saved list never moves the subtotal or the foot. Below it the lists stack and the page simply gets longer or shorter by one row at a time, and the total of the two stays the same.
What do the empty states say?
An empty cart says "Your cart is empty" and points to Saved for later; an empty saved list says "Nothing saved" and points to Save for later. Check out stays in place with an empty cart and says to move something back first, rather than disappearing. Nothing is deleted anywhere: both lists live in the block's state.
Is it accessible from the keyboard?
Yes. The Saved for later heading is a button that opens and closes its list and reports whether it is open; the lists are named lists; every row's button is named for its item; and what changed is said in a polite message. A closed list is made inert, so its buttons leave the Tab order.
Does the saved list survive a reload?
No, and the status line says so: "The saved list lives only on this page." That keeps the demo honest and free of browser storage. In your app keep saved items on the account (or in the browser for visitors who are not signed in), return them from your cart API with their current price so the note can be worked out, and send each move to the server.