Order Confirmation Block React component
A thank-you section after checkout: springy check with confetti, a copyable order number, a tracking timeline with the current step pulsing, a live change-or-cancel window with an inline confirm, downloadable receipt and calendar file, items with buy again, address and payment, create-an-account and a copyable referral code.
About the Order Confirmation Block component
Order Confirmation Block is the page shoppers see right after paying. It confirms the order with a short celebration, gives the order number in a copyable chip and shows where the order is now on a four-step timeline.
It also covers the questions people have in the next few minutes: a live countdown says how long they can still change or cancel (with an inline confirm), the receipt and an .ics file for the delivery window download right away, items can go back into the cart, guests can claim the order with just a password, and a referral code is one tap to copy.
When to use it
Use it as the thank-you step of your checkout, filled from the order you just created.
Hide the cancel window (cancelMinutes 0) if orders go to the warehouse immediately, and set signedIn so logged-in shoppers don't see the account card.
Installation
Add the Order Confirmation Block component to your project with the shadcn CLI. It lands in components/order-confirmation-block.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/order-confirmation-blockOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeCollections
Use-case pages that compare Order Confirmation Block with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Order Confirmation Block FAQ
- How does the change window work?
- It counts down from cancelMinutes once the page is in the browser (not during server rendering, so nothing mismatches). Cancel order asks for confirmation inline, calls onCancel, then switches the block to an Order cancelled state. At zero, the button is replaced by a note that changes go through support.
- What do the downloads contain?
- Download receipt saves a plain-text receipt with lines, totals, payment and address. Add to calendar saves an .ics all-day event covering the delivery window from delivery.start to delivery.end. Both are generated in the browser; swap in your PDF invoice link if you have one.
- Is the confetti random?
- No. Each piece's direction, height and colour come from its index, so the server and browser render the same thing. It's skipped when the shopper prefers reduced motion.
- What does Buy again do?
- It calls onBuyAgain with the line and changes the button to In cart so the shopper sees it worked.
- Is it accessible?
- The order and referral codes are buttons with names that say what they copy, Copied is announced, the timeline marks done and in-progress steps in text, the countdown and cancel confirm sit in a polite live region and the account form has a labelled password field.
