Order Status Tracker

Cards 81

About

Order Status Tracker This component provides a detailed view of an order's status, including the item, summary, and tracking actions. It is designed to be highly reusable by accepting all its content through props.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Order Status Tracker to your project and fits it to your theme.

Code

How Order Status Tracker is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { OrderStatus } from "@/components/ui/order-status-tracker";

export default function OrderStatusDemo() {
  // Sample data to populate the component
  const orderData = {
    illustrationUrl: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-HNciDluT0NAzIwovOE2g7EpZORt7CQ.png&w=320&q=75",
    statusTitle: "Order Status",
    statusDescription: "Your package is on the way",
    item: {
      imageUrl: "https://cdn.21st.dev/assets/mirror/af/af09aef38f2014d6aa310f188d334577eaccff846a58c9bfa433e81f9570c26d.jpg",
      name: "Apple Watch",
      details: "Color: Grey",
      price: 1500.00,
    },
    summary: [
      { label: "Order ID", value: "153468790876" },
      { label: "Shipping Address", value: "45 Onye's House" },
      { label: "Tracking ID", value: "153468790876" },
      { label: "Estimated Delivery", value: "11/03/25; 04:54pm" },
    ],
    trackingStatus: "Your order is confirmed and in transit",
  };

  const handleTrackOrder = () => {
    // In a real app, this would trigger navigation or a modal
    console.log("Track order button clicked!");
    alert("Tracking functionality would be implemented here.");
  };

  return (
    <div className="flex items-center justify-center h-full bg-background p-4">
      <OrderStatus
        illustrationUrl={orderData.illustrationUrl}
        statusTitle={orderData.statusTitle}
        statusDescription={orderData.statusDescription}
        item={orderData.item}
        summary={orderData.summary}
        trackingStatus={orderData.trackingStatus}
        onTrackOrder={handleTrackOrder}
      />
    </div>
  );
}