Order Confirmation Page
A post-purchase success screen with order number, email confirmation, delivery estimate, and an items summary. The landing view right after checkout completes.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/order-confirmation-page.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/ecommerce/ecommerce10.tsx instead.
Usage
The file also exports ecommerce10Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.
import { Ecommerce10, ecommerce10Demo } from "@/components/blocks/ecommerce/ecommerce10"; export default function Page() { return <Ecommerce10 {...ecommerce10Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| orderNumber | string | none | Order number shown after the # sign. |
| string | none | Address the confirmation email was sent to. | |
| estimatedDelivery | string | none | Human-readable delivery estimate, e.g. a formatted date. |
| items | OrderItem[] | [] | Purchased items shown in the summary list. |
| trackOrderHref | string | "#" | Destination for the Track order button. |
| continueShoppingHref | string | "#" | Destination for the Continue shopping button. |
| className | string | none | Extra classes for the outer section element. |
Types
type OrderItem = { name: string; quantity: number; price: string; image?: { src: string; alt: string }; };
Behavior notes
- Static confirmation screen: both buttons are real links via render={<Link/>}, but there is no client-side state, no countdown, and no order data fetched, all values come in as props.
- The items summary section only renders when items has entries; estimatedDelivery and the email line always render.
- An item without an image prop falls back to a centered Package icon instead of a broken thumbnail.
More Ecommerce Blocks
View all →wishlist-manager
Wishlist Manager
Saved-items list with stock-status badges, move-to-cart and remove actions, and a real empty state.
product-information-tabs
Product Information Tabs
Tabbed product details with Description, Features, Specifications, Reviews, and Shipping panels.
collection-showcase-grid
Collection Showcase Grid
A large featured-collection hero card alongside a grid of smaller supporting collection tiles.
shop-by-brand-grid
Shop by Brand Grid
A grid of bordered brand tiles with a wordmark-style name, product count, and a hover affordance.
sale-countdown-timer
Sale Countdown Timer
A live days/hours/minutes/seconds countdown in default, compact, or full-width banner layouts.
gift-card-redemption-form
Gift Card Redemption Form
A code-entry form that validates against a fixed list of demo gift cards and shows a real success or error state.