# Order Confirmation
> The page after Pay: the receipt people screenshot, print and come back to. A thank-you set large in your serif on a grained band, with a check that draws itself; the order number, placed date, arrival window and amount paid in one ruled row above the fold; the items as a ledger with totals; ship-to, delivery and payment. Prints as a plain black-on-white receipt with the permalink written out; Copy order link for a permalink you give it. Calendar dates in UTC so they never slip a day; the placed time in the visitor's zone once hydrated. Loading skeleton included. Compound, through useOrderConf…
A shadcn/ui block from the [@ecomcn](https://ecomcn.vercel.app/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/ecomcn/order-confirmation).
- Page, with a live preview: https://shadcn.exchange/r/ecomcn/order-confirmation
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/ecomcn/order-confirmation-light-4f48e1f0874aad45.png
- Registry item: https://ecomcn.vercel.app/r/order-confirmation.json
- Categories: ecommerce, post-purchase
- Listed: 2026-10-19, source last changed 2026-10-19
## Install
```bash
npx shadcn@latest add https://shadcn.exchange/r/ecomcn/order-confirmation.json
```
Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.
## Dependencies
- npm packages: `lucide-react`, `motion`
- Registry items: `button`, `skeleton`
## Files
### `src/registry/ecomcn/order-confirmation/order-confirmation.tsx`
```tsx
"use client"
import * as React from "react"
import { Check, Link2, Printer } from "lucide-react"
import { AnimatePresence, MotionConfig, motion, useReducedMotion } from "motion/react"
import { Button } from "@/components/ui/button"
import { Skeleton } from "@/components/ui/skeleton"
import { cn } from "@/lib/utils"
/*
* The page after Pay: the receipt people screenshot, print and come back to.
*
*
*
* or composed
*
*
*
*
*
* The thank-you is set large in your serif on a grained band — the one
* moment in the funnel that earns a flourish — with a check that draws
* itself (Motion; none under reduced motion). Everything a shopper looks
* for sits above the fold: the order number, the date, when it arrives,
* what was paid. It prints as a plain receipt — no band, no buttons, black
* on white, the permalink written out — and `permalink` is a link that
* shows this order again from any device: give it a token, never session
* state. Calendar dates (arrival) are shown in UTC so they never slip a
* day; the placed time is the visitor's own once hydrated. A date range is
* two formatted days joined with a dash, not `formatRange`: its spacing
* differs between Node's ICU and the browser's, and the server's HTML has
* to match the first client render exactly.
*/
export interface ConfirmationLine {
id: string
name: string
/** "Tan · EU 42". */
variant?: string
quantity: number
unitPrice: number
/** Already rendered, so the block never assumes next/image. */
image?: React.ReactNode
}
export interface OrderConfirmationData {
/** What the shopper quotes to support: "ATL-77760". */
number: string
/** ISO timestamp the order was placed. */
placedAt: string
/** Where the confirmation email went. */
email?: string
lines: ConfirmationLine[]
totals: { subtotal: number; discount?: number; shipping: number; tax?: number; total: number }
/** The address as display lines — `formatAddressLines` from address-form gives these. */
shipTo?: string[]
delivery?: {
/** "Express". */
label: string
/** Calendar dates, "2026-10-21": the window it should arrive in. */
from?: string
to?: string
}
/** "Visa ending 4242", "Pay in 3". */
payment?: string
}
/** The same settle curve as the other ecomcn morphs: no bounce, an editorial ease. */
const MORPH = { duration: 0.45, ease: [0.2, 0, 0, 1] } as const
const subscribeNothing = () => () => {}
/** True once hydrated: the server can't know the visitor's locale or time zone. */
function useHydrated() {
return React.useSyncExternalStore(subscribeNothing, () => true, () => false)
}
/** Film grain as an inline SVG: no image request, and it prints as nothing. */
const GRAIN =
"url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E\")"
/* ─── context ──────────────────────────────────────────────────────────── */
export interface OrderConfirmationContextValue {
order: OrderConfirmationData
formatMoney: (amount: number) => string
/** "Wed, Oct 21" — a calendar date, in UTC so it never slips a day. */
formatDay: (isoDate: string) => string
/** "Wed, Oct 21 – Fri, Oct 23", or one day when they match. */
formatWindow: (from: string, to?: string) => string
/** When it was placed: the visitor's date and time once hydrated, UTC before. */
formatPlaced: (isoTimestamp: string) => string
permalink?: string
title: React.ReactNode
actions?: React.ReactNode
}
const OrderConfirmationContext = React.createContext(null)
export function useOrderConfirmation() {
const context = React.useContext(OrderConfirmationContext)
if (!context) {
throw new Error("useOrderConfirmation must be used within .")
}
return context
}
/* ─── root ─────────────────────────────────────────────────────────────── */
export interface OrderConfirmationProps extends Omit, "title"> {
order?: OrderConfirmationData
currency?: string
/** `undefined` follows the visitor's locale, once hydrated. */
locale?: string
/** "Thank you for your order", by default — "Thank you, Ada." reads warmer. */
title?: React.ReactNode
/** A link that shows this order again from any device. Adds "Copy link", and prints. */
permalink?: string
/** What next: "Continue shopping", "Track your order". Hidden in print. */
actions?: React.ReactNode
/** The order is still loading — from the permalink, say. */
loading?: boolean
children?: React.ReactNode
}
export function OrderConfirmation({
order,
currency = "USD",
locale: localeProp,
title = "Thank you for your order",
permalink,
actions,
loading = false,
className,
children,
...props
}: OrderConfirmationProps) {
const hydrated = useHydrated()
const locale = localeProp ?? (hydrated ? undefined : "en-US")
const timeZone = hydrated ? undefined : "UTC"
const money = React.useMemo(() => new Intl.NumberFormat(locale, { style: "currency", currency }), [locale, currency])
const day = React.useMemo(
() => new Intl.DateTimeFormat(locale, { weekday: "short", month: "short", day: "numeric", timeZone: "UTC" }),
[locale]
)
const placed = React.useMemo(
() => new Intl.DateTimeFormat(locale, { dateStyle: "medium", timeStyle: "short", timeZone }),
[locale, timeZone]
)
const context = React.useMemo(
() =>
order
? {
order,
formatMoney: (amount) => money.format(amount),
formatDay: (iso) => day.format(new Date(`${iso}T00:00:00Z`)),
formatWindow: (from, to) =>
!to || to === from
? day.format(new Date(`${from}T00:00:00Z`))
: `${day.format(new Date(`${from}T00:00:00Z`))} – ${day.format(new Date(`${to}T00:00:00Z`))}`,
formatPlaced: (iso) => placed.format(new Date(iso)),
permalink,
title,
actions,
}
: null,
[order, money, day, placed, permalink, title, actions]
)
return (
{loading || !context ? (
) : (
{children ?? (
<>
)}
)}
)
}
/* ─── parts ────────────────────────────────────────────────────────────── */
/** The band: a check that draws itself, the order number, and the thank-you. */
export function OrderConfirmationHeader({ className, ...props }: React.HTMLAttributes) {
const { order, title } = useOrderConfirmation()
const reduce = useReducedMotion()
return (
Order confirmed · {order.number}
{title}
{order.email ? (
A confirmation is on its way to {order.email}.
) : null}
)
}
/** The four things people look for, in a ruled row: number, placed, arrives, paid. */
export function OrderConfirmationFacts({ className, ...props }: React.HTMLAttributes) {
const { order, formatMoney, formatWindow, formatPlaced } = useOrderConfirmation()
const facts: { term: string; value: React.ReactNode }[] = [
{ term: "Order number", value: {order.number} },
{
term: "Placed",
// UTC on the server, the visitor's zone right after hydration; React
// keeps the server's text for that first pass, then the client's.
value: (
),
},
]
if (order.delivery?.from) {
facts.push({
term: "Arrives",
value: ,
})
}
facts.push({ term: "Paid", value: {formatMoney(order.totals.total)} })
return (
{facts.map((fact, i) => (
= 2 && "max-sm:border-t sm:border-l")}
>
{fact.term}
{fact.value}
))}
)
}
/** What was bought, as a ledger, and the totals under it. */
export function OrderConfirmationItems({ className, ...props }: React.HTMLAttributes) {
const { order, formatMoney } = useOrderConfirmation()
const headingId = React.useId()
const count = order.lines.reduce((n, l) => n + l.quantity, 0)
const rows: { label: string; value: string; strong?: boolean }[] = [
{ label: "Subtotal", value: formatMoney(order.totals.subtotal) },
]
if (order.totals.discount) rows.push({ label: "Discount", value: `−${formatMoney(order.totals.discount)}` })
rows.push({ label: "Shipping", value: order.totals.shipping === 0 ? "Free" : formatMoney(order.totals.shipping) })
if (order.totals.tax !== undefined) rows.push({ label: "Tax", value: formatMoney(order.totals.tax) })
return (