Order History Block React component
An account orders page: status tabs with counts, search by order number or product, order cards with stacked thumbnails and colored status pills (a pulsing dot for orders on the way), expandable details with a delivery progress timeline, tracking number, line items and actions to track, buy again, return, cancel or download the invoice.
About the Order History Block component
Order History Block is the 'My orders' page of a customer account. Tabs and search find any order quickly, and each card shows at a glance what was bought, its status and the total.
Opening an order reveals where it is on its way, the tracking number and the items, with the right actions for its state: track what's on the way, return what's arrived, cancel what hasn't shipped and buy favourites again in one click.
When to use it
Use it in customer accounts of any store, or in an order lookup page for guests.
For a single order's confirmation use the Order Confirmation Block.
Installation
Add the Order History Block component to your project with the shadcn CLI. It lands in components/order-history-block.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/order-history-blockOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<OrderHistoryBlock /> accepts 6 props, all optional.
| Prop | Type | Default |
|---|---|---|
| orders | { id: string; date: string; status: Status; step: number; steps: string[]; eta?: string; carrier?: string; lines: OrderLine[] }[] | ORDERS |
| currency | string | "$" |
| onBuyAgain | (order: PastOrder) => void | — |
| onReturn | (order: PastOrder) => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- orders{ id: string; date: string; status: Status; step: number; steps: string[]; eta?: string; carrier?: string; lines: OrderLine[] }[]Default: ORDERS
- currencystringDefault: "$"
- onBuyAgain(order: PastOrder) => void
- onReturn(order: PastOrder) => void
- theme"dark" | "light"Default: "dark"
- classNamestring
Collections
Use-case pages that compare Order History Block with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Order History Block FAQ
- How does the timeline work?
- Each order has four step labels and a step index. Segments up to the current step fill green; returned orders show the last step in grey.
- Which actions appear?
- Track for orders on the way, Return for delivered ones, Cancel while processing, Buy again for anything already shipped, and Invoice always.
- How should I format dates?
- Pass ready-made strings. Formatting on your server avoids differences between server and browser locales.
- Can I connect real tracking?
- Replace the Track toast with a link to your carrier page using the carrier field, or open a tracking drawer.
- Is it accessible?
- Tabs are real tabs, cards are buttons with aria-expanded controlling labelled regions, the timeline marks the current step, and every action confirms itself with a status toast.
