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.
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.
app/order-tracking-page.tsxnpx hoverlab add order-tracking-page
Or over MCP, from your editor's agent — no account needed.
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.
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.
Order NW-84213
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
The real page, rendered in your current theme — every section below is a live block, not a screenshot.
Only want one section? Open it and copy that block instead — browse Orders & Reviews.
/**
* 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>
)
}
components/ — each block page has its own copy button.app/order-tracking-page.tsx. The imports already point at @/components/…, so they resolve with no edits.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.
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.
Gallery, sticky buy box, details accordion and reviews — ordered by what a shopper needs before they can decide.
Editable lines beside a sticky summary, so the total and the checkout button survive a scroll through four quantity changes.
Address and payment with the site navigation stripped and the order summary moved above the form on mobile — both aimed squarely at completion rate.
The post-purchase screen, with navigation restored and a rail that shows what to buy next rather than what was just bought.
Order history in the settings shell rather than a second sidebar layout — an account area and a settings area are the same shape.
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.
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.