Order History Page React block for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Order History Page is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import OrderHistoryPage from @/components/blocks/order-history-page.

"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 (
    <OrderHistoryPage
      orders={orders}
      currency="USD"
      onReorder={async (order) => {
        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

• ordersdefault "ORDER_HISTORY_SAMPLE"
  OrderHistoryOrder[]

  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).

• currencydefault "USD"
  string

  ISO 4217 code for every amount.

• localedefault ""
  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.

• defaultSelectedIddefault ""
  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.

• defaultQuerydefault ""
  string

  The search text on mount.

• defaultStatusdefault "all"
  "all" | "processing" | "shipped" | "delivered" | "returned" | "cancelled"

  The status filter on mount.

• onReorder
  (order: OrderHistoryOrder) => void | Promise<unknown>

  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<unknown>

  Return items on a delivered order until its returnBy date; simulated by default with a toast.

• onDownloadInvoice
  (order: OrderHistoryOrder) => void | Promise<unknown>

  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.

• helpHrefdefault "/help"
  string

  Where Get help goes when there is no onHelp.

• shopHrefdefault "/"
  string

  The Continue shopping link under the list and the Start shopping link of the empty state; "" hides both.

• groupBydefault "month"
  "month" | "none"

  Month headings in the list, or one flat list.

• showSearchdefault true
  boolean

  The search field over the list.

• showFilterdefault true
  boolean

  The status filter next to the search.

• showMapdefault false
  boolean

  The route illustration in the tracker.

• showHistorydefault true
  boolean

  The shipment history in the tracker.

• searchShortcutdefault "/"
  string

  Focuses the search from anywhere on the page; "" binds nothing.

• listWidthdefault 400
  number

  The list column on wide screens in px; drag the divider (or use its arrow keys) to resize.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The tracker's progress and the Buy again button.

• radiusdefault "md"
  "sm" | "md" | "lg"

  Panels and cards: 12, 16 or 24px.

• heightdefault "screen"
  "screen" | "fill"

  screen makes the page exactly the viewport (h-dvh); fill takes what is left in a flex column inside an app shell.

• loadingdefault false
  boolean

  Skeleton rows while the orders load.

• animateIndefault true
  boolean

  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<Record<OrderHistoryPageSlot, string>>

  Classes for header, toolbar, list, group, row, detail, tracker, items, details, summary, help and empty.

Parts

FAQ

More React blocks