---
title: "Orders page"
description: "Loam Studio's orders: status tabs with counts, a Pro data table with search and a date range, the order beside it or in a sheet, and a refund form."
plan: Pro
docs: https://ui.edbn.me/docs/templates/orders-page
---

# Orders page

Loam Studio's orders: status tabs with counts, a Pro data table with search and a date range, the order beside it or in a sheet, and a refund form.

The same admin frame as the overview, with Orders active and its count of orders to pack kept live. Tabs split five weeks of sample orders into All, Unfulfilled, Unpaid, Shipped and Returns with counts, and a date-range Popover with a Calendar and Last 7 or 30 days presets narrows everything, counts included. The Pro data table searches by number or customer, sorts and pages. An order number, or a click on its row, shows the order-detail block adapted: beside the table from about 1280px, sticky as the page scrolls, and in a sheet below that. While the panel shows, the Items column steps aside (and Payment too when the table is narrow), since the panel carries both, so every header stays whole. Fulfil adds tracking and moves the order to Shipped; the table, tabs and sidebar follow. Refund opens a Dialog built on the Pro forms: an amount checked against what's left to refund, a reason, and whether to email the customer a receipt, with inline errors, a spinner while it goes through and the provider's own refusal shown above the fields (the sample refuses refunds over £500). The order then reads Part refunded or Refunded.

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/orders-page
```

## Dependencies
- npm: lucide-react@^1.33.0, @tanstack/react-table@^9.2.4, zod@^4.3.5
- edbn: edbn-base, aspect-ratio, avatar, badge, breadcrumb, button, calendar, card, dialog, dropdown-menu, input-group, kbd, popover, separator, sheet, sidebar, spinner, tabs, text-link, timeline, tooltip, data-table, form-core, form-fields

## Source

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

## More app screens templates

All 5, with install commands: https://ui.edbn.me/docs/templates/app-screens (Markdown: https://ui.edbn.me/docs/templates/app-screens.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