shadcn.io is not affiliated with official shadcn/ui
Checkout Flow Stepper Block for React Aria
A four-step ceramics checkout on icon cells where Next stays off until the step is right, the reason sits in the foot, and the order total follows the cart and the delivery choice.
Installation
Overview
Keep a buyer from going on with something half done, with this checkout stepper for React with React Aria. A hairline frame with plus marks holds four icon cells that share their lines: Cart, Shipping, Payment and Review, each a Steps trigger. Next is off until the step is satisfied, and the foot says why: "Choose a delivery option to continue." The cart takes quantities with minus and plus buttons, shipping takes an address and a Radio Group of delivery options, and payment takes an email and a card as one joined control. An order total in the foot follows the quantities and the delivery choice, in whole cents. Pressing the off button still helps: it shows each problem under its field and moves focus to the first. "Place order" is the block's one Shine Button.
FAQ
How does the guard work?
issuesOf returns the problems for the current step, and the first one is the reason. While there is a reason, Next is aria-disabled (so it stays focusable) and the status line shows it; the button points to that line. Pressing it marks every field of the step, moves focus to the first problem and keeps the step. Back is always free.
Is this a real card form?
It checks a card in the tab's memory so you can see the pattern: the brand from the first digits, the Luhn sum, the expiry against a fixed month and the CVC length. A real page never lets card digits reach its own code and uses the fields your payment provider hosts. Autocomplete is off so a browser never offers a saved card to a demo. The test card 4242 4242 4242 4242 passes with any future expiry, and "Use the test card" fills it.
How is the total worked out?
In integer cents: each product's price in cents times its quantity, plus the delivery option's cents. usd is the only place cents become dollars. Change PRODUCTS or DELIVERIES and the cart, the foot and the review all follow.
What stays local, and how do I make it real?
Everything. Placing the order keeps only the card brand and last four digits and wipes the rest, and the final panel says "Order placed in this demo". Nothing is charged. To make it real, send the cart, address and delivery to your server and the card to your payment provider's hosted fields from the submit handler on the Review step.
How does the keyboard work?
The step cells are one tab stop on the current step; arrow keys move between the cells you can reach. Enter inside any field is Next. In the card control a complete part moves focus to the next, and Backspace in an empty part goes back one. After a move, focus goes to the new step's heading.