# Order History Page > A React order history page for an ecommerce account: orders grouped by month with search and filters, and a full order detail beside them. - Type: React block (Blocks) - Access: Pro (the source needs a Wingo UI Pro plan, see https://wingo-ui.com/pricing) - Version: 1.0.0 - Install: `npx wingo-ui@latest add order-history-page` - Docs: https://wingo-ui.com/components/order-history-page ## Interaction The list shows every order grouped by month: number, status badge, date, item count, total, photos of the items and the actions that fit its status (Track while it is on the way, Buy again once it ended, Invoice unless it was cancelled). Type in the search field (or press / anywhere) to match order numbers, products and SKUs, and pick a status in the filter (a bottom sheet on phones); No orders match offers Clear filters. Click or tap an order to open it: on wide screens it opens beside the list (drag the divider to resize, the open row lifts), below 768px it slides in as its own view with an Orders back button, swipe back and Escape. Arrow keys move between orders, Home and End jump, Enter opens. The detail shows the tracker (status, arrival or delivery time, milestones, courier with the tracking number to copy, shipment history), the items with quantities and prices, the shipping and billing addresses, the payment method and delivery, the summary with discount, shipping, tax and total, and Return items (inside the return window) or Get help. Buy again, Return items and Invoice show a spinner while their promise runs and a toast when done. ## Installation ```bash npx wingo-ui@latest add order-history-page ``` Pro item: run `npx wingo-ui@latest login` once with a Pro account. The CLI adds the files, their dependencies and a version record for updates. With shadcn: `npx shadcn@latest add @wingo-ui/order-history-page` (needs the @wingo-ui registry with your API key in components.json) Files: - `components/blocks/order-history-page.tsx` - `components/blocks/order-history-page-data.ts` npm dependencies: `npm i motion lucide-react` Wingo UI dependencies (installed automatically): - [Badge](https://wingo-ui.com/components/badge) ([Markdown](https://wingo-ui.com/components/badge.md)) - [Button](https://wingo-ui.com/components/button) ([Markdown](https://wingo-ui.com/components/button.md)) - [Description List](https://wingo-ui.com/components/description-list) ([Markdown](https://wingo-ui.com/components/description-list.md)) - [Empty State](https://wingo-ui.com/components/empty-state) ([Markdown](https://wingo-ui.com/components/empty-state.md)) - [Order tracker](https://wingo-ui.com/components/order-tracker) ([Markdown](https://wingo-ui.com/components/order-tracker.md)) - [Price](https://wingo-ui.com/components/price) ([Markdown](https://wingo-ui.com/components/price.md)) - [Search Input](https://wingo-ui.com/components/search-input) ([Markdown](https://wingo-ui.com/components/search-input.md)) - [Select](https://wingo-ui.com/components/select) ([Markdown](https://wingo-ui.com/components/select.md)) - [Split View](https://wingo-ui.com/components/split-view) ([Markdown](https://wingo-ui.com/components/split-view.md)) - [Toast](https://wingo-ui.com/components/toast) ([Markdown](https://wingo-ui.com/components/toast.md)) - [useControllableState](https://wingo-ui.com/components/use-controllable-state) ([Markdown](https://wingo-ui.com/components/use-controllable-state.md)) - [useLocale](https://wingo-ui.com/components/use-locale) ([Markdown](https://wingo-ui.com/components/use-locale.md)) - [Commerce](https://wingo-ui.com/components/commerce) ([Markdown](https://wingo-ui.com/components/commerce.md)) - [Date utils](https://wingo-ui.com/components/date-utils) ([Markdown](https://wingo-ui.com/components/date-utils.md)) - [Motion presets](https://wingo-ui.com/components/motion) ([Markdown](https://wingo-ui.com/components/motion.md)) - [Relative time](https://wingo-ui.com/components/relative-time) ([Markdown](https://wingo-ui.com/components/relative-time.md)) - [Tones](https://wingo-ui.com/components/tones) ([Markdown](https://wingo-ui.com/components/tones.md)) - [UIProvider](https://wingo-ui.com/components/ui-config) ([Markdown](https://wingo-ui.com/components/ui-config.md)) ## Usage ```tsx "use client" import { OrderHistoryPage } from "@/components/blocks/order-history-page" import type { OrderHistoryOrder } from "@/components/blocks/order-history-page-data" export function AccountOrders({ orders }: { orders: OrderHistoryOrder[] }) { return ( { await fetch("/api/cart", { method: "POST", body: JSON.stringify({ items: order.items }) }) }} onReturn={async (order) => { await fetch(`/api/orders/${order.id}/returns`, { method: "POST" }) }} onDownloadInvoice={(order) => { window.open(`/api/orders/${order.id}/invoice.pdf`, "_blank") }} helpHref="/support" /> ) } ``` ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `orders?` | `OrderHistoryOrder[]` | `"ORDER_HISTORY_SAMPLE"` | The orders ({ id, number, placedAt, status, items, shipping, shippingMethod, discount, discountCode, tax, total, shippingAddress, billingAddress, payment, eta, deliveredAt, events, courier, returnBy, invoiceUrl, notice }), sorted by placedAt. Defaults to ORDER_HISTORY_SAMPLE (eight orders of Emma Carter in New York). | | `currency?` | `string` | `"USD"` | ISO 4217 code for every amount. | | `locale?` | `string` | `""` | Intl locale for money and dates; empty uses the UIProvider's, then the browser's. | | `selectedId?` | `string \| null` | | The open order, controlled; null opens none. Pair it with onSelect. | | `defaultSelectedId?` | `string \| null` | `""` | The open order while uncontrolled. Left out (or empty), wide screens open the newest order; null opens none. Phones always start on the list. | | `onSelect?` | `(id: string \| null) => void` | | Called when an order is opened. | | `defaultQuery?` | `string` | `""` | The search text on mount. | | `defaultStatus?` | `"all" \| "processing" \| "shipped" \| "delivered" \| "returned" \| "cancelled"` | `"all"` | The status filter on mount. | | `onReorder?` | `(order: OrderHistoryOrder) => void \| Promise` | | Buy again: add the order's items to the cart. A promise shows the button loading; simulated by default with a toast. | | `onReturn?` | `(order: OrderHistoryOrder) => void \| Promise` | | Return items on a delivered order until its returnBy date; simulated by default with a toast. | | `onDownloadInvoice?` | `(order: OrderHistoryOrder) => void \| Promise` | | Invoice. Left out, Invoice is a download link to the order's invoiceUrl, and hidden when there is none. | | `onHelp?` | `(order: OrderHistoryOrder) => void` | | Get help; left out it links to helpHref. | | `helpHref?` | `string` | `"/help"` | Where Get help goes when there is no onHelp. | | `shopHref?` | `string` | `"/"` | The Continue shopping link under the list and the Start shopping link of the empty state; "" hides both. | | `groupBy?` | `"month" \| "none"` | `"month"` | Month headings in the list, or one flat list. | | `showSearch?` | `boolean` | `true` | The search field over the list. | | `showFilter?` | `boolean` | `true` | The status filter next to the search. | | `showMap?` | `boolean` | `false` | The route illustration in the tracker. | | `showHistory?` | `boolean` | `true` | The shipment history in the tracker. | | `searchShortcut?` | `string` | `"/"` | Focuses the search from anywhere on the page; "" binds nothing. | | `listWidth?` | `number` | `400` | The list column on wide screens in px; drag the divider (or use its arrow keys) to resize. | | `tone?` | `"neutral" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | The tracker's progress and the Buy again button. | | `radius?` | `"sm" \| "md" \| "lg"` | `"md"` | Panels and cards: 12, 16 or 24px. | | `height?` | `"screen" \| "fill"` | `"screen"` | screen makes the page exactly the viewport (h-dvh); fill takes what is left in a flex column inside an app shell. | | `loading?` | `boolean` | `false` | Skeleton rows while the orders load. | | `animateIn?` | `boolean` | `true` | Rows rise in with a short stagger on mount; off under reduced motion. | | `now?` | `Date \| number` | | The reference time for return windows and the tracker; default the live clock. | | `labels?` | `OrderHistoryPageLabelsInput` | | Every visible string, English by default (DEFAULT_ORDER_HISTORY_PAGE_LABELS): title, description, statuses, actions, section titles, toasts, the empty and no-results states. | | `className?` | `string` | | Classes for the root. | | `classNames?` | `Partial>` | | Classes for header, toolbar, list, group, row, detail, tracker, items, details, summary, help and empty. | ## Parts ### DEFAULT_ORDER_HISTORY_PAGE_LABELS (constant) The English strings for every visible label, the default of labels. ### ORDER_HISTORY_STATUS_TONES (constant) The badge tone of each status: processing neutral, shipped info, delivered success, returned neutral, cancelled danger. ### ORDER_HISTORY_SAMPLE (constant) Eight sample orders from August to November 2026 (shipped, processing, delivered with a discount, returned, cancelled). ### ORDER_HISTORY_NOW (constant) The sample's clock (Nov 6, 2026, 2:30 PM), so arrival times and return windows stay stable. ### orderSubtotal (function) The sum of price x quantity over an order's items. ### orderTotal (function) The amount charged: the order's total, else subtotal - discount + shipping + tax. ### OrderHistoryPageProps (type) Props of OrderHistoryPage, including the div attributes of the root. ### OrderHistoryOrder (type) One order: number, placedAt, status, items, amounts, addresses, payment and the tracker's eta, events and courier. ### OrderHistoryItem (type) { id, title, variant?, image?, quantity, price, sku? }: one line of an order. ### OrderHistoryAddress (type) { name, company?, line1, line2?, city, region?, postalCode, country?, phone? }. ### OrderHistoryPayment (type) { method, last4?, note? }: Visa ending in 4242, Apple Pay, PayPal. ### OrderHistoryStatus (type) "processing" | "shipped" | "delivered" | "returned" | "cancelled". ### OrderHistoryPageLabels (type) Every label, as in DEFAULT_ORDER_HISTORY_PAGE_LABELS. ### OrderHistoryPageLabelsInput (type) The shape of labels: any subset of OrderHistoryPageLabels, with statuses merged one by one. ### OrderHistoryStatusFilter (type) An OrderHistoryStatus or "all", the type of defaultStatus. ## Examples - **Phone layout**: In a 390px column the rows become cards and an order slides in as its own view with a back button. - **Brand tone with the route map**: tone="brand", radius="lg" and showMap on an order that is on its way. - **Delivered orders and returns**: Filtered to delivered, with Return items inside the return window and an Invoice handler. - **No results**: A search that matches nothing offers Clear filters. - **Empty account**: No orders yet, with a Start shopping link. - **Loading**: Skeleton rows in the real layout while the orders load. - **A failing action**: onReorder rejects: the button stops loading and an error toast shows the message. - **Euros, de-DE formatting**: currency="EUR" with locale="de-DE" for amounts and dates. ## See also - [Order tracker](https://wingo-ui.com/components/order-tracker) ([Markdown](https://wingo-ui.com/components/order-tracker.md)) - [Checkout Page](https://wingo-ui.com/components/checkout-page) ([Markdown](https://wingo-ui.com/components/checkout-page.md)) - [Split View](https://wingo-ui.com/components/split-view) ([Markdown](https://wingo-ui.com/components/split-view.md)) - [Description List](https://wingo-ui.com/components/description-list) ([Markdown](https://wingo-ui.com/components/description-list.md)) - [Storefront Page](https://wingo-ui.com/templates/storefront-page) ([Markdown](https://wingo-ui.com/templates/storefront-page.md)) --- Canonical: https://wingo-ui.com/components/order-history-page More components: https://wingo-ui.com/components ยท Index for agents: https://wingo-ui.com/llms.txt