shadcn.io is not affiliated with official shadcn/ui
Progress Indicator Checkout Block for React
A five-stage checkout whose progress row sits over a running-total strip that gains a line as each stage is finished, with finished stages as links back that remove the lines after them.
Installation
Overview
Show the buyer what the order adds up to as they go, with this progress-indicator checkout for React with Base UI. A compact header from Bluecoat Supply, a paint and wallpaper shop, sits over one hairline panel. The top is a row of five cells built from Steps: Cart, Shipping, Payment, Review and Confirm, each with an icon and a title. Under it a running-total strip of four cells gains a line as each stage is finished: the cart from the start, then shipping and tax once the shipping stage is behind you, then the total. Lines still to come say so in muted words, "After your ZIP" and "After your address". Each stage holds one small real field: a quantity stepper, a ZIP and a delivery choice, a saved card in a Native Select, and a tick that mixed paint cannot be returned. A finished stage is a link back, going back removes the lines after it, and going forward again checks every stage in between, so the indicator can never get ahead of the fields. The foot's label follows the stage, and the last one is "Place order" with the total. It's built from Steps, Field, Input, Native Select, Button, Shine Button and Guides, with a CSS entrance only. For shops where the total is a surprise until the last page.
FAQ
When does each line of the strip appear?
The cart line is live from the start and follows the quantity. Shipping and tax appear when you finish the shipping stage (you have a ZIP and a delivery choice), and the last cell changes from "So far" to "Total". Before that they read "After your ZIP" and "After your address". Going back to Cart or Shipping takes shipping and tax away again; nothing you typed is lost, so going forward restores them.
Can I skip ahead by clicking a later stage?
Only to stages you have already reached, and never past an unfinished one. Pressing a later cell checks every stage before it; if one is not done, the indicator stops on that stage, shows its problem, says "Finish Shipping first." and moves focus to its field. The cells for stages you have not reached are disabled.
What does the progress row do on a phone?
The cells keep their icons and drop their titles, and a line under them reads "Step 3 of 5: Payment", so the row stays five cells wide at 320 pixels. The running-total strip becomes two columns and the foot button is pinned to the bottom of the screen.
What does each stage check?
Cart: one to nine cans, with the stepper answering at its limits. Shipping: a five-digit ZIP. Payment: a saved card chosen from the list. Review: the colour-code tick. Confirm has nothing to check; it shows what was placed. A press with a problem shows it under the field, says it in the status line and focuses the field.
How are the figures worked out?
In whole cents. The cart is the quantity times $32.00, tax is eight percent of the cart rounded to the cent, and delivery is $4.90 standard or $11.90 express. The total is their sum, and the strip, the Review hint and the Place order button all read it from the same helper.
What stays local, and how do I connect it for real?
All of it: the product, the prices and the saved cards are typed in the file and placing the order waits 700 milliseconds and then says it was placed in this demo. To connect it, load the cart and the saved cards from your account API, price shipping and tax on your server when the ZIP changes, and have Place order create the order with the chosen card's token.