---
title: "Order confirmation with progress"
description: "The page after paying: the order number, the order's progress, what was paid, and where it's going."
plan: Pro
docs: https://ui.edbn.me/docs/blocks/order-confirmation
---

# Order confirmation with progress

The page after paying: the order number, the order's progress, what was paid, and where it's going.

Shows the order number with Copy and where the receipt went, then the order's progress from placed to delivered, with the current step marked and the dates to come as estimates. Below are the pieces and the total paid, then the address, delivery and card in review rows. Download receipt shows its progress; Track order and Continue shopping are links.

A Pro block 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
```

## Dependencies
- npm: lucide-react@^1.33.0
- edbn: edbn-base, aspect-ratio, button, separator, spinner, text-link, timeline

## Source

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

## More cart & checkout blocks

All 5, with install commands: https://ui.edbn.me/docs/blocks/cart-and-checkout · https://ui.edbn.me/docs/blocks/cart-and-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