Commerce block

Order History

Past orders with stacked item thumbnails and worded statuses — people recognise what they bought long before the order number.

195 lineslucide-reactAdded 8 Aug 2026Updated 10 Sept 2026

orders
history
account
tracking
status

What's included

components/order-history-list.tsx
Needs lucide-react

Works with

React
Next.js
Tailwind CSS
TypeScript

npx hoverlab add order-history-list

Or over MCP, from your editor's agent — no account needed.

License

Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.

Was this useful?

Start a page with this section — add more, order them, and leave with the page source.

Preview

Order history

Everything you have ordered, newest first.

Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.

Source

components/order-history-list.tsx

/**
 * <OrderHistoryList> — a customer's past orders.
 *
 * Status is a word and an icon, never a coloured dot alone. "Delivered",
 * "Out for delivery" and "Refunded" are different enough that a customer
 * scanning for the one that has gone wrong needs to read, not decode.
 *
 * Each order shows its item thumbnails stacked rather than a count. People
 * remember what they bought by sight long before they remember the order
 * number, and a row reading "3 items" makes them open all three.
 *
 * Server component.
 */

import * as React from 'react'
import { Package, Truck, CircleCheck, RotateCcw, ChevronRight } from 'lucide-react'

export type OrderStatus = 'processing' | 'shipped' | 'delivered' | 'refunded'

export interface PastOrder {
  id: string
  number: string
  /** ISO date. */
  placed: string
  status: OrderStatus
  total: number
  /** One swatch per item, for the stacked thumbnails. */
  swatches: string[]
  /** Shown for shipped orders. */
  trackingEta?: string
}

export interface OrderHistoryListProps {
  orders?: PastOrder[]
  currency?: string
  locale?: string
  className?: string
}

const STATUS: Record<
  OrderStatus,
  { label: string; icon: React.ReactNode; tone: string }
> = {
  processing: {
    label: 'Processing',
    icon: <Package className="h-3.5 w-3.5" />,
    tone: 'bg-sky-500/15 text-sky-600 dark:text-sky-400',
  },
  shipped: {
    label: 'On its way',
    icon: <Truck className="h-3.5 w-3.5" />,
    tone: 'bg-amber-500/15 text-amber-600 dark:text-amber-400',
  },
  delivered: {
    label: 'Delivered',
    icon: <CircleCheck className="h-3.5 w-3.5" />,
    tone: 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400',
  },
  refunded: {
    label: 'Refunded',
    icon: <RotateCcw className="h-3.5 w-3.5" />,
    tone: 'bg-muted text-muted-foreground',
  },
}

const DEFAULT_ORDERS: PastOrder[] = [
  {
    id: '1',
    number: 'ORD-4821-9930',
    placed: '2026-08-08',
    status: 'shipped',
    total: 19710,
    trackingEta: 'Arriving Friday',
    swatches: ['from-stone-300 to-stone-500', 'from-sky-200 to-sky-400'],
  },
  {
    id: '2',
    number: 'ORD-4712-1184',
    placed: '2026-07-02',
    status: 'delivered',
    total: 8900,
    swatches: ['from-emerald-300 to-emerald-600'],
  },
  {
    id: '3',
    number: 'ORD-4655-3027',
    placed: '2026-06-19',
    status: 'refunded',
    total: 3200,
    swatches: ['from-rose-300 to-rose-500'],
  },
  {
    id: '4',
    number: 'ORD-4590-7741',
    placed: '2026-05-30',
    status: 'delivered',
    total: 24400,
    swatches: [
      'from-indigo-300 to-indigo-600',
      'from-amber-300 to-amber-600',
      'from-zinc-300 to-zinc-500',
    ],
  },
]

function formatPrice(minor: number, currency = 'GBP', locale = 'en-GB'): string {
  return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(minor / 100)
}

function formatDate(iso: string, locale = 'en-GB'): string {
  return new Date(`${iso}T00:00:00Z`).toLocaleDateString(locale, {
    day: 'numeric',
    month: 'short',
    year: 'numeric',
    timeZone: 'UTC',
  })
}

export function OrderHistoryList({
  orders = DEFAULT_ORDERS,
  currency = 'GBP',
  locale = 'en-GB',
  className = '',
}: OrderHistoryListProps) {
  return (
    <section className={`w-full ${className}`}>
      <h2 className="text-lg font-bold tracking-tight">Order history</h2>
      <p className="mt-0.5 text-sm text-muted-foreground">
        Everything you have ordered, newest first.
      </p>

      <ul className="mt-5 space-y-3">
        {orders.map((order) => {
          const status = STATUS[order.status]

          return (
            <li key={order.id}>
              <a
                href={`/orders/${order.id}`}
                className="group flex flex-wrap items-center gap-4 rounded-2xl border border-border/60 bg-card/60 p-4 transition-all hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-md"
              >
                {/* Stacked thumbnails — people recognise what they bought. */}
                <div aria-hidden className="flex shrink-0 -space-x-3">
                  {order.swatches.slice(0, 3).map((swatch, i) => (
                    <span
                      key={i}
                      className={`h-[48px] w-[40px] overflow-hidden rounded-lg border-2 border-background bg-gradient-to-br ${swatch}`}
                    />
                  ))}
                  {order.swatches.length > 3 ? (
                    <span className="flex h-[48px] w-[40px] items-center justify-center rounded-lg border-2 border-background bg-muted text-xs font-medium text-muted-foreground">
                      +{order.swatches.length - 3}
                    </span>
                  ) : null}
                </div>

                <div className="min-w-[10rem] flex-1">
                  <p className="font-mono text-xs font-medium">{order.number}</p>
                  <p className="mt-0.5 text-xs text-muted-foreground">
                    Placed <time dateTime={order.placed}>{formatDate(order.placed, locale)}</time>
                    {' · '}
                    {order.swatches.length} {order.swatches.length === 1 ? 'item' : 'items'}
                  </p>
                  {order.trackingEta ? (
                    <p className="mt-1 text-xs font-medium text-amber-600 dark:text-amber-400">
                      {order.trackingEta}
                    </p>
                  ) : null}
                </div>

                {/* Icon and word, never colour alone. */}
                <span
                  className={`inline-flex shrink-0 items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium ${status.tone}`}
                >
                  {status.icon}
                  {status.label}
                </span>

                <p className="min-w-20 shrink-0 text-end text-sm font-semibold tabular-nums">
                  {formatPrice(order.total, currency, locale)}
                </p>

                <ChevronRight
                  aria-hidden
                  className="h-4 w-4 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5 rtl:rotate-180 rtl:group-hover:-translate-x-0.5"
                />
              </a>
            </li>
          )
        })}
      </ul>
    </section>
  )
}

Before you paste

Styling is Tailwind utility classes on semantic tokens (bg-card, text-muted-foreground) — it inherits your theme instead of overriding it.
Install: npm i lucide-react
Every prop has a default, so it renders standalone before you wire it up.

Where it goes

Drop it at components/order-history-list.tsx and import it where you need the section:

import { OrderHistoryList } from '@/components/order-history-list'

Customize

2 of this block’s props are simple enough to drive from here. Change them and the block below re-renders — it is the same component whose source is above, not a mock of it. Everything else it accepts is in the table underneath.

Props

Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.

Prop	Type	Default
`orders`	`PastOrder[]`	`DEFAULT_ORDERS`
`currency`	`string`	`'GBP'`
`locale`	`string`	`'en-GB'`
`className`	`string`	`''`

Not using React?

The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.

order-history-list.html

<!--
  Order History — markup from the Hoverlab catalog.

  This is the block rendered once to HTML and wrapped as a component
  file. It is not a port of the React source: the Tailwind classes carry
  the design, which is the part that took the work, and they are the same
  in every framework.

  This block has no interactive behaviour, so nothing is missing.
-->
<section class="w-full ">
  <h2 class="text-lg font-bold tracking-tight">Order history</h2>
  <p class="mt-0.5 text-sm text-muted-foreground">Everything you have ordered, newest first.</p>
  <ul class="mt-5 space-y-3">
    <li>
      <a href="/orders/1" class="group flex flex-wrap items-center gap-4 rounded-2xl border border-border/60 bg-card/60 p-4 transition-all hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-md">
        <div aria-hidden="true" class="flex shrink-0 -space-x-3">
          <span class="h-[48px] w-[40px] overflow-hidden rounded-lg border-2 border-background bg-gradient-to-br from-stone-300 to-stone-500"></span>
          <span class="h-[48px] w-[40px] overflow-hidden rounded-lg border-2 border-background bg-gradient-to-br from-sky-200 to-sky-400"></span>
        </div>
        <div class="min-w-[10rem] flex-1">
          <p class="font-mono text-xs font-medium">ORD-4821-9930</p>
          <p class="mt-0.5 text-xs text-muted-foreground">Placed <time dateTime="2026-08-08">8 Aug 2026</time> · 2 items</p>
          <p class="mt-1 text-xs font-medium text-amber-600 dark:text-amber-400">Arriving Friday</p>
        </div>
        <span class="inline-flex shrink-0 items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium bg-amber-500/15 text-amber-600 dark:text-amber-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-truck h-3.5 w-3.5" aria-hidden="true"><path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"></path><path d="M15 18H9"></path><path d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14"></path><circle cx="17" cy="18" r="2"></circle><circle cx="7" cy="18" r="2"></circle></svg>On its way</span>
        <p class="min-w-20 shrink-0 text-end text-sm font-semibold tabular-nums">£197.10</p>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right h-4 w-4 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5 rtl:rotate-180 rtl:group-hover:-translate-x-0.5" aria-hidden="true">
          <path d="m9 18 6-6-6-6"></path>
        </svg>
      </a>
    </li>
    <li>
      <a href="/orders/2" class="group flex flex-wrap items-center gap-4 rounded-2xl border border-border/60 bg-card/60 p-4 transition-all hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-md">
        <div aria-hidden="true" class="flex shrink-0 -space-x-3">
          <span class="h-[48px] w-[40px] overflow-hidden rounded-lg border-2 border-background bg-gradient-to-br from-emerald-300 to-emerald-600"></span>
        </div>
        <div class="min-w-[10rem] flex-1">
          <p class="font-mono text-xs font-medium">ORD-4712-1184</p>
          <p class="mt-0.5 text-xs text-muted-foreground">Placed <time dateTime="2026-07-02">2 Jul 2026</time> · 1 item</p>
        </div>
        <span class="inline-flex shrink-0 items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium bg-emerald-500/15 text-emerald-600 dark:text-emerald-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check h-3.5 w-3.5" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path></svg>Delivered</span>
        <p class="min-w-20 shrink-0 text-end text-sm font-semibold tabular-nums">£89.00</p>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right h-4 w-4 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5 rtl:rotate-180 rtl:group-hover:-translate-x-0.5" aria-hidden="true">
          <path d="m9 18 6-6-6-6"></path>
        </svg>
      </a>
    </li>
    <li>
      <a href="/orders/3" class="group flex flex-wrap items-center gap-4 rounded-2xl border border-border/60 bg-card/60 p-4 transition-all hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-md">
        <div aria-hidden="true" class="flex shrink-0 -space-x-3">
          <span class="h-[48px] w-[40px] overflow-hidden rounded-lg border-2 border-background bg-gradient-to-br from-rose-300 to-rose-500"></span>
        </div>
        <div class="min-w-[10rem] flex-1">
          <p class="font-mono text-xs font-medium">ORD-4655-3027</p>
          <p class="mt-0.5 text-xs text-muted-foreground">Placed <time dateTime="2026-06-19">19 Jun 2026</time> · 1 item</p>
        </div>
        <span class="inline-flex shrink-0 items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium bg-muted text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rotate-ccw h-3.5 w-3.5" aria-hidden="true"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path></svg>Refunded</span>
        <p class="min-w-20 shrink-0 text-end text-sm font-semibold tabular-nums">£32.00</p>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right h-4 w-4 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5 rtl:rotate-180 rtl:group-hover:-translate-x-0.5" aria-hidden="true">
          <path d="m9 18 6-6-6-6"></path>
        </svg>
      </a>
    </li>
    <li>
      <a href="/orders/4" class="group flex flex-wrap items-center gap-4 rounded-2xl border border-border/60 bg-card/60 p-4 transition-all hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-md">
        <div aria-hidden="true" class="flex shrink-0 -space-x-3">
          <span class="h-[48px] w-[40px] overflow-hidden rounded-lg border-2 border-background bg-gradient-to-br from-indigo-300 to-indigo-600"></span>
          <span class="h-[48px] w-[40px] overflow-hidden rounded-lg border-2 border-background bg-gradient-to-br from-amber-300 to-amber-600"></span>
          <span class="h-[48px] w-[40px] overflow-hidden rounded-lg border-2 border-background bg-gradient-to-br from-zinc-300 to-zinc-500"></span>
        </div>
        <div class="min-w-[10rem] flex-1">
          <p class="font-mono text-xs font-medium">ORD-4590-7741</p>
          <p class="mt-0.5 text-xs text-muted-foreground">Placed <time dateTime="2026-05-30">30 May 2026</time> · 3 items</p>
        </div>
        <span class="inline-flex shrink-0 items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium bg-emerald-500/15 text-emerald-600 dark:text-emerald-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check h-3.5 w-3.5" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path></svg>Delivered</span>
        <p class="min-w-20 shrink-0 text-end text-sm font-semibold tabular-nums">£244.00</p>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right h-4 w-4 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5 rtl:rotate-180 rtl:group-hover:-translate-x-0.5" aria-hidden="true">
          <path d="m9 18 6-6-6-6"></path>
        </svg>
      </a>
    </li>
  </ul>
</section>

This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
It is one frame: the component in its initial state, with no props applied beyond the defaults.
Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.

What each framework gets across the whole catalog — effects convert properly; this rung is markup.

For AI

The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.

See the prompt

Used in these pages

Account Orders2 blocks

Want the whole screen instead of this one section? Open a page and copy it entire.

6 more blocks in Orders & Reviews

All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.

Browse Orders & Reviews

Shipping one commercially

Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.

A commercial licence for everything in the catalog
Unlimited bundle exports, in Vue, Svelte and Tailwind
One payment — no subscription, nothing to renew

Pro — $79 once

More Orders & Reviews blocks

View category

Thanks — your order is confirmed

A confirmation is on its way to you@example.com

Order numberORD-4821-9930

Estimated delivery

Fri 14 August – Tue 18 August

We will email a tracking link as soon as it ships.

Delivering to

Ada Lovelace12 Marchmont StreetLondonWC1N 1AGUnited Kingdom

Payment

Subtotal: £219.00
Discount: −£21.90
Delivery: Free
Total: £197.10

2 items

Merino Crew Sweater
Stone · M
×1
£89.00
Cotton Oxford Shirt
Sky · L
×2
£130.00

Track this order Continue shopping

Order Confirmation

The thank-you screen built to prevent two support emails: a selectable order number and a delivery date range rather than "soon".

Orders & Reviews212 lines1 dep2 Sept

4 reviews

Sort

Hannah T.Verified purchase28 July 2026
Better than the price suggests
I bought this expecting to return it and it has become the thing I reach for three days a week. The knit is dense without being heavy, and after four washes there is no pilling at the cuffs where I would expect it first. Sizing is honest — I am usually a medium and the medium fits with room for a shirt underneath.
Bought M · usually M
Sam K.11 June 2026
Nice but the colour is off
The stone reads much warmer in person than on screen — closer to a light camel. Lovely sweater, just not the colour I was picturing.
Devin R.Verified purchase14 July 2026
Great, but runs slightly long
No complaints about the material at all. The body is about an inch longer than I expected, which is fine untucked but worth knowing if you are between sizes.
Bought L · usually L
Priya M.Verified purchase30 June 2026
Third one I have bought
Two in stone, one in navy. They hold their shape better than anything else I own at twice the price.

Customer Reviews

Sortable reviews with verified-purchase badges, optimistic helpful votes and a real expand control instead of a fade that hides text.

Orders & Reviews274 lines1 dep13 Sept

Order NW-84213

Arriving Thursday 4 – Friday 5 September

EvriH00 4471 9928 3310

Order placed
Online · 29 Aug, 14:02
Packed
Peterborough fulfilment centre · 30 Aug, 08:41
Collected by carrier
Peterborough · 30 Aug, 17:15
In transit
Warrington hub · 31 Aug, 03:22
Scanned at the sorting hub. The next scan is usually the local depot.
Out for delivery — not yet
Delivered — not yet

Order Tracking Timeline

The fortnight between buying and reviewing, answered properly: an arrival range rather than a date, exceptions above the timeline, and a copyable carrier reference.

Orders & Reviews258 lines1 dep11 Sept

Write a Review

The form that produces the reviews the other blocks display — a real radio group for stars, and a prompt that changes with the rating because one star and five need different questions.

Orders & Reviews249 lines1 dep2 Sept

Order Lookup Form

Order tracking for the guest who never made an account, which is most of them.

Orders & Reviews176 linesNo deps

Reviews

4.6, and the numbers behind it

An average with nothing beside it is unreadable: 4.6 from nine reviews and 4.6 from nine hundred are different facts. These are what make the first number mean something.

Average: 4.6
Reviews: 1,284
Verified purchase: 91%
One and two star: 6%

Review Distribution Band

The rating summary with the numbers that make an average trustworthy — the count, the spread and the verified share.

Orders & Reviews125 linesNo deps13 Sept