Order History 4 - Order detail with tracking stepsPro
An order detail page pairing a vertical shipment timeline (placed, packed, shipped, out for delivery, delivered) with the purchased items and a price summary. Use it as the destination when a customer clicks into a single order to see where it is.
About Order History 4
An order detail page pairing a vertical shipment timeline (placed, packed, shipped, out for delivery, delivered) with the purchased items and a price summary. Use it as the destination when a customer clicks into a single order to see where it is.
Order History 4 is a pro order history block for React, built on shadcn/ui and Tailwind CSS. It ships as 158 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.
- order
- tracking
- timeline
- steps
- shipping
- detail
- summary
Installation
- Add the Chocolate UI registry to your
components.json(see the installation guide). - Run the shadcn CLI:
npx shadcn@latest add @chocolate/order-history-04Dependencies installed automatically: lucide-react.
Uses: button, reveal, separator, utils.
Usage
import OrderHistory04 from "@/components/blocks/order-history-04"
export default function Page() {
return <OrderHistory04 />
}