shadcn.io is not affiliated with official shadcn/ui
Pre-order Checkout Block for Radix UI
A limited-edition pre-order that splits your copies across two ship batches by queue position, with a figure of both batches, the day each ships, the free-cancel day and what is charged when.
Installation
Overview
Sell a limited run in batches and show people where they stand, with this pre-order checkout for React with Radix UI. A compact header from Foxglove Lane, a board-game publisher, sits over a narrow hairline frame with a plus mark on each corner. The first band is a figure of two print batches of 600 copies, drawn as bars: copies others have reserved, yours, and what is still open. A copies field with Button steppers and a typed number, built from Field and Input, moves your slice across the batches by queue position: 2 copies are #412 and #413 in the first batch, and 200 copies are 189 in the first batch and 11 in the second. Under it each batch says what it holds for you, the day it ships, the last day you can cancel for free (7 days before) and what is charged then, and the line "2 shipments" is worked out rather than typed. Reserve is the only Shine Button. It's built from Input, Field, Button, Shine Button and Guides, with a CSS entrance only. For limited editions, print runs, crowdfunded goods and any pre-sale that ships in waves.
FAQ
How are my copies placed in the batches?
Orders fill the first batch up to its 600 copies, then the second. 411 copies in the first batch are already reserved (typed data in the demo), so copy number one of yours is queue place #412. With 189 copies free in the first batch, copy 190 and beyond fall into the second, starting at #601. The figure, the rows and the shipment count all read from one function, so they cannot disagree.
When is the card charged?
Each batch is charged on the day it ships, for the copies it holds, at the unit price in whole cents. Nothing is charged at reservation. The rows show the amount per batch and the day, and the total under them is the sum of the same two numbers. Free cancellation ends 7 days before a batch ships; the date is worked out from the batch date, not typed twice.
What happens at the limits?
The stepper buttons stay pressable at 1 and at 200 and say why in the polite status line instead of going dead. Typing something that is not a whole number from 1 to 200 marks the field and explains it under the field; the figure and rows then show zero copies rather than a wrong split, and Reserve says to enter a number first.
Where do the dates come from?
They are typed ISO days in the data and written out with fixed weekday and month tables, so the server and the browser print the same words and nothing depends on the clock or the visitor's locale.
How does it work with a keyboard and a screen reader?
The figure is drawn with shapes only and is hidden from assistive technology; the batch rows say the same in words (copies, queue places, ship and cancel days). The stepper has named buttons, the field has a visible label and a described note, and one polite status line says what each change did.
What stays local, and how do I connect it for real?
Everything: the reserved counts are typed, and Reserve only sets a flag in the tab and says that nothing was held or charged. To connect it, load each batch's remaining copies from your API, have Reserve create the pre-order on your server with the quantity, and let your payment provider charge at each ship date through saved payment methods or scheduled invoices.