An order confirmation with a self-drawing success mark, a paper receipt that prints out of a slot with perforated edges and a barcode, and a delivery timeline. Download receipt saves a text file locally unless you handle it.
Thanks, Maya. Order NW-20931 is being packed. We sent the receipt to maya@studio.co and will text you when it ships.
npx shadcn@latest add https://hyperblur.dev/r/checkout-success-receipt.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/checkout-success-receipt.tsx.
import { CheckoutSuccessReceipt } from "@/components/hyperblur/checkout-success-receipt"
<CheckoutSuccessReceipt currentStage={2} continueCta={{ label: "Back to store", href: "/" }} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Order confirmed" | Section heading. |
| merchant | string | "Northwind Supply" | Store name on the receipt. |
| order | { number: string; date: string; customer: string; email: string; payment: string; items: { name: string; detail: string; quantity: number; price: number }[]; shipping: number; tax: number } | Order NW-20931 | Order data printed on the receipt. |
| stages | { label: string; date: string }[] | Placed, Packed, Shipped, Delivered | Delivery timeline steps. |
| currentStage | number | 1 | Index of the stage in progress. Earlier stages show as done. |
| currency | string | "USD" | ISO currency code. |
| continueCta | { label: string; href: string } | { label: "Continue shopping", href: "#" } | Secondary link button. |
| onDownload | (orderNumber: string) => void | Replaces the built-in text download when provided. | |
| accent | string | "#10b981" | Success mark, timeline and stamp color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variable. |