Skip to content

Order Tracking

For the customer with an order number and no account — a lookup, an arrival range rather than a promised date, and the review form where the "how did we do" email actually lands.

3 blocks40 lineslucide-reactAdded 10 Sept 2026

What's included

  • app/order-tracking-page.tsx
  • 3 blocks it is built from, installed with it
  • Needs lucide-react

Works with

  • React
  • Next.js
  • Tailwind CSS
  • TypeScript

npx hoverlab add order-tracking-page

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?

Preview

Find your order

Guest checkout is the majority of orders on most storefronts, and the usual tracking page asks those buyers to sign in to an account they were never offered.

On the confirmation email, top right. Starts with a #.

Both have to match. It is what stops an order number being a lookup key for anyone.

Order NW-84213

Arriving Thursday 4 – Friday 5 September

EvriH00 4471 9928 3310
  1. Order placed

    Online · 29 Aug, 14:02

  2. Packed

    Peterborough fulfilment centre · 30 Aug, 08:41

  3. Collected by carrier

    Peterborough · 30 Aug, 17:15

  4. In transit

    Warrington hub · 31 Aug, 03:22

    Scanned at the sorting hub. The next scan is usually the local depot.

  5. Out for delivery — not yet

  6. Delivered — not yet

Review your Aeropress Go

This will be public, shown as Priya Raman, marked as a verified purchase. You can edit or delete it later.

How many stars?

Pick a rating and the rest of the form appears.

The real page, rendered in your current theme — every section below is a live block, not a screenshot.

Built from

All blocks
  1. Order Lookup FormOrder tracking for the guest who never made an account, which is most of them.
  2. Order Tracking TimelineThe fortnight between buying and reviewing, answered properly: an arrival range rather than a date, exceptions above the timeline, and a copyable carrier reference.
  3. Write a ReviewThe 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.

Only want one section? Open it and copy that block instead — browse Orders & Reviews.

Source

app/order-tracking-page.tsx
/**
 * The fortnight between buying and reviewing.
 *
 * `account-orders-page` serves someone signed in. This page serves the
 * larger group: a person with an order number in an email, no account, and
 * one question — where is it. Requiring a login to answer that is the
 * single most common cause of a "where is my order" support email, which is
 * the most common support email there is.
 *
 *   lookup      order number and email, no account
 *   timeline    with an arrival *range* rather than a date. A single date
 *               is a promise the courier did not make, and every day past
 *               it is a complaint the shop caused
 *   review      the form that produces the reviews every other commerce
 *               block displays, with a real radio group for the stars
 *
 * The review form belongs on this page rather than on a product page, and
 * that placement is the argument. Reviews are asked for after delivery, in
 * the email that says the parcel arrived, and the link in that email lands
 * on the tracking screen. Putting the form anywhere else means building a
 * second route to it for the only moment anyone actually uses it.
 */

import * as React from 'react'
import { OrderLookupForm } from '@/components/order-lookup-form'
import { OrderTrackingTimeline } from '@/components/order-tracking-timeline'
import { ReviewSubmitForm } from '@/components/review-submit-form'

export default function OrderTrackingPage() {
  return (
    <main className="min-h-screen bg-background text-foreground">
      <OrderLookupForm />
      <OrderTrackingTimeline />

      {/* Where the "how did we do" email actually lands. */}
      <ReviewSubmitForm />
    </main>
  )
}

How to use it

  1. 1. Copy each of the 3 blocks above into components/ — each block page has its own copy button.
  2. 2. Drop this file at app/order-tracking-page.tsx. The imports already point at @/components/…, so they resolve with no edits.
  3. 3. Delete the sections you do not want. Every block takes props, so the copy changes without the layout moving.

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

More Commerce Pages

Open the full page for this page

Product Collection

Sticky filter sidebar, sort toolbar and product grid — with the facets dropped rather than stacked on mobile, so a shopping page does not open as a form.

Commerce Pages4 blocks68 lines
Open the full page for this page

Product Detail

Gallery, sticky buy box, details accordion and reviews — ordered by what a shopper needs before they can decide.

Commerce Pages6 blocks75 lines
Open the full page for this page

Shopping Bag

Editable lines beside a sticky summary, so the total and the checkout button survive a scroll through four quantity changes.

Commerce Pages3 blocks42 lines
Open the full page for this page

Checkout

Address and payment with the site navigation stripped and the order summary moved above the form on mobile — both aimed squarely at completion rate.

Commerce Pages2 blocks57 lines
Open the full page for this page

Order Confirmed

The post-purchase screen, with navigation restored and a rail that shows what to buy next rather than what was just bought.

Commerce Pages2 blocks56 lines
Open the full page for this page

Account Orders

Order history in the settings shell rather than a second sidebar layout — an account area and a settings area are the same shape.

Commerce Pages2 blocks42 lines
Open the full page for this page

Product Comparison

The page between a listing and a product detail, with the two questions a comparison table alone cannot answer: will it fit, and can I actually have it.

Commerce Pages6 blocks53 lines
Open the full page for this page

Express Checkout

Checkout for the buyer who will not fill in a form: wallet buttons above the fields, and the address a wallet returns shown and changeable before the charge rather than after it.

Commerce Pages3 blocks57 lines