---
title: "Order detail"
description: "One order for the shop admin: payment and fulfilment badges, line items with photos, totals, a fulfilment timeline, and Fulfil and Refund."
plan: Pro
docs: https://ui.edbn.me/docs/blocks/order-detail
---

# Order detail

One order for the shop admin: payment and fulfilment badges, line items with photos, totals, a fulfilment timeline, and Fulfil and Refund.

The header holds the order number, when and by whom it was placed, a payment badge and a fulfilment badge, then Fulfil, Refund and a menu to view the customer, print the packing slip or copy the number. Each line shows the product photo, name, variant, quantity times unit price and the line total. The totals sit right-aligned under them in tabular figures, with the VAT the prices include. Fulfil shows a spinner, then marks the order Fulfilled and fills in Packed and Shipped with the tracking number. Refund asks first in an AlertDialog, says so if it fails, and adds a Refunded step. The timeline comes last with each step's detail beside it; given a wider max-width it moves beside the items from about 670px.

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-detail
```

## Dependencies
- npm: lucide-react@^1.33.0
- edbn: edbn-base, alert-dialog, aspect-ratio, badge, button, card, dropdown-menu, 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 dashboards blocks

All 8, with install commands: https://ui.edbn.me/docs/blocks/dashboards (Markdown: https://ui.edbn.me/docs/blocks/dashboards.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