Checkout 15 block design & features
A single-page checkout composed with Shadcn UI that moves through its steps in place. An order column on the left lists products with square photos, names, details and prices above subtotal, shipping and total. The main column on the right shows a heading and four numbered steps, Contact, Shipping address, Delivery and Payment, each with its own fields or options and a continue button.
Only one step is open at a time. Continuing collapses the current step into a short recap line under its title, such as the email address or the full shipping address, swaps its number for a check mark and opens the next step. Each completed step gets an Edit link that reopens it, and the delivery options are bordered radio rows whose price feeds the shipping line in the order column once the delivery step is reached. Height changes are smooth and short, and they are disabled when reduced motion is preferred.
The flow is calm and orderly, close to the express checkouts of large retailers, and the recap lines make it easy to review details without a separate review page. It is an elaborate, content-driven block that needs product photos, sample customer details and delivery options. On smaller screens the order column moves below the steps.