shadcn.io is not affiliated with official shadcn/ui
Back in Stock Checkout Block for React Aria
A waitlist claim for three shirts that came back, each with a typed per-person limit, a stepper that stops at it, a Claim toggle, a claim window in words and a total worked out in cents.
Installation
Overview
Turn a waitlist into orders without a countdown, with this back-in-stock checkout for React with React Aria. A compact header from Sunbeam Row, a linen-shirt shop, sits over a hairline frame with a plus mark on each corner. The first band holds three shirts that came back in a grid on shared hairlines, each with a drawn thumbnail, its size and colour, its price, a limit typed by the shop ("Limit 2 per person"), a quantity stepper that stops at that limit and says why, and a Claim Toggle that moves it into your claim. The claim below lists all three lines at once ("Not claimed" until you do), so its height never changes, with the total in whole cents. The window is stated in words, "Claims close Thursday 15 October, 18:00 UTC", with no live countdown and no count of other shoppers. Release my spot frees every claim, and Confirm claim is the only Shine Button. For restocks, drops and waitlists.
FAQ
Why does the stepper stop at a limit?
Because the shop set one per person for each shirt (2, 1 and 3 in the demo), and a stepper that allows more would only fail later. The plus button stays pressable at the limit and answers in the polite status line ("Limit 2 per person for Camp-collar shirt, set by the shop") instead of going dead, which keeps it reachable for a keyboard user.
Why is there no countdown?
Because the window is a fact, not pressure. The page says when claims close in words and in a machine-readable time element, and nothing ticks or flashes. There are no counts of how many others are looking either: the only numbers on the page are the ones that affect your decision, your limit and your total.
What does Claim do before I confirm?
It puts the shirt and its quantity into the claim list and the total. Pressing it again, or Release my spot, takes it out. Confirm claim then holds the claim in the demo and says so; changing anything after that turns the confirmation back into a draft.
What does the claim look like with nothing claimed?
It still lists the three shirts as "Not claimed" with a dash for each price, so the band keeps its height whatever you do. Confirm claim and Release my spot stay in place and answer politely if you press them with nothing claimed.
How is it labelled for a screen reader?
Each stepper is a named group ("Quantity of Camp-collar shirt") with named buttons, each Claim toggle is announced as "Claim Camp-collar shirt" and pressed or not, and one polite line says what each change did and the new claim total.
What stays local, and how do I connect it for real?
Stock, limits, prices and the window are typed data and the claim lives in the tab. To connect it, load the waitlist and limits from your API, create a reservation with a hold until the window closes when Confirm claim is pressed, and release it from Release my spot; enforce the per-person limit on the server as well.