---
title: "Order confirmation page"
description: "Kiln & Co.'s page after paying: the order confirmed with its progress, pieces, totals and address, a receipt PDF, and a prompt to save your details as an account."
plan: Pro
docs: https://ui.edbn.me/docs/templates/order-confirmation-page
---

# Order confirmation page

Kiln & Co.'s page after paying: the order confirmed with its progress, pieces, totals and address, a receipt PDF, and a prompt to save your details as an account.

The checkout's quiet header and the store footer around the order-confirmation block: the h1 thanks the customer by name with the order number, says where the confirmation went, and a progress line runs Confirmed, Packed, Shipped, Delivered with the dates to come. The pieces, what was paid, and the address, shipping, card and gift wrap follow. Download receipt renders the order with the Pro PDFs' receipt template in the browser and downloads it. The renderer loads only when pressed, from the wasmUrl you pass: self-host the compiler's .wasm from @myriaddreamin/typst-ts-web-compiler. The button reads Preparing PDF… at the same width, a second press waits for the first, and a failure says why with Retry. Save your details is the Pro sign-up form cut to what a guest needs: the order's email, read-only, and a password with its rules ticked off as it's typed. Create account shows its progress, clears a refused password with the reason, then says Account created with a link to account-orders, where the order can be tracked. From 1024px the prompt sits beside the order and stays in view; narrower, it follows the order. Goes well with (collection-carousel) shows pieces not in the order. The sample shows the account created; without it, the prompt is untouched.

A Pro page template built on Base UI and Tailwind CSS v4.

## Installation

This is a Pro item. Once per project, create a token at https://ui.edbn.me/dashboard/tokens, put it in `.env.local` as `EDBN_TOKEN`, and add the registry to `components.json`:

```json
{
  "registries": {
    "@edbn": {
      "url": "https://ui.edbn.me/r/{name}.json",
      "headers": { "Authorization": "Bearer ${EDBN_TOKEN}" }
    }
  }
}
```

Then install:

```bash
npx shadcn@4.19.0 add @edbn/order-confirmation-page
```

## Dependencies
- npm: lucide-react@^1.33.0, zod@^4.3.5
- edbn: edbn-base, aspect-ratio, button, card, carousel, field, input, input-group, select, separator, spinner, text-link, form-core, form-fields, pdf-browser

## Source

The source is part of Pro (https://ui.edbn.me/pricing). The install above adds it to the project, ready to edit.

## More checkout templates

All 3, with install commands: https://ui.edbn.me/docs/templates/checkout (Markdown: https://ui.edbn.me/docs/templates/checkout.md)

## For agents
- Base theme, once per project: npx shadcn@4.19.0 add https://ui.edbn.me/r/edbn-base.json
- MCP server with search, items, examples and source: https://ui.edbn.me/mcp
- Every page and item: https://ui.edbn.me/llms.txt