shadcn.io is not affiliated with official shadcn/ui
Order History Reorder Checkout Block for Svelte
A grocery delivery service's three past orders in an accordion: tick lines to buy again, pick a named swap or Skip it for what is out of stock, and a foot that reads Reorder 5 items with the total.
Installation
Overview
Let people rebuy a shop in a few taps and decide what replaces what is gone, with this reorder panel for Svelte with Ark UI. A compact header holds the title and one sentence from Northgate Pantry, a grocery delivery service that brings the shop on Saturdays. Inside a hairline frame with a plus mark on each corner, an Accordion holds the last three orders, each with the day it was delivered, how many of its four lines are picked and what it cost, the latest open and one open at a time; every body is the same height, so opening another never moves the foot. A line in stock is a Checkbox row. A line that is out of stock has no checkbox, a minus mark and the words "Out of stock", and a Native Select labelled Swap for, with Skip it and one or two named substitutes, each with what it adds or saves ("Oat milk, barista (+$0.60)"). A short list counts the items picked, the lines swapped and the out-of-stock lines skipped, and the foot reads "Reorder 5 items: $41.80", the only Shine Button, following every tick and every swap in whole cents. For groceries, pharmacies, office supplies and anything people buy more than once.
FAQ
How do swaps work?
An out-of-stock line holds a typed list of substitutes. The select starts on "Skip it", which leaves the line out; choosing a substitute puts the line into the reorder at the substitute's price for the same quantity, and choosing Skip it again takes it out. The difference to the old price is written in the option, "+$0.60", "-$0.30" or "same price", and the line's own price in the row follows the choice. Skipped lines are counted, not hidden, so nothing disappears unseen.
How are the items and the total worked out?
Every price is an integer number of cents. The total is the sum, over the ticked in-stock lines and the swapped ones, of the price of one times the quantity on the old order, and the item count is the sum of those quantities, so "Reorder 5 items" is five units, not five lines. The same helpers feed the foot, the counts in each order's heading and the list under the orders. usd is the only place cents become text.
Why is the accordion always the same height?
Opening an order closes the one that was open (the accordion is not collapsible, so one is always open), and every body has a minimum height set for four rows with two out-of-stock lines, so the block keeps its size and the foot stays where it is. A phone has taller rows because the select drops under the name, so its minimum is larger.
Is it accessible from the keyboard?
Yes. Each order's trigger is a heading button with an expanded state, each checkbox is named by its line and described by its pack size and stock, each select has a visible label, and one polite status message in the foot reports each change. The accordion is controlled with value and onValueChange.
What stays local in the demo, and how do I wire it up?
Everything. The past orders are typed in this file, the ticks and swaps live in the block's state, and Reorder says that the items were added to a cart in this demo; nothing is ordered. In your app load the orders from your API, take the stock and the list of substitutes from the catalog on the day (a line can be out of stock now that was in stock then) and have Reorder add the chosen lines to the cart.