Order Status Card

Cards 60

About

OrderStatusCard A visually polished and animated card component to display a process timeline, such as an order completion status. It is built to be highly reusable, responsive, and theme-adaptive, leveraging shadcn/ui conventions and framer-motion for smooth animations.

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

Code

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

Usage.tsx

import { OrderStatusCard, OrderStatusCardProps } from "@/components/ui/order-status-card";
import { Clock, MessageSquare, User, CheckCircle2 } from "lucide-react";

// --- Demo Component ---
const OrderStatusCardDemo = () => {
  // Mock data to be passed as props
  const orderData: Omit<OrderStatusCardProps, "onContinue"> = {
    title: "Order completed! 🎉",
    description: "Order has been completed and feedback request sent to client.",
    timelineItems: [
      {
        icon: <Clock className="h-5 w-5 text-muted-foreground" />,
        title: "Order Duration: 7 days",
      },
      {
        icon: <MessageSquare className="h-5 w-5 text-blue-500" />,
        title: "Feedback request has been sent",
        details: "12 Dec 2024, 12:15 • Company",
        subItems: [
          {
            icon: <User className="h-4 w-4" />,
            text: "Sent to: Jane Doe",
          },
        ],
      },
      {
        icon: <CheckCircle2 className="h-5 w-5 text-green-500" />,
        title: "Order completed",
        details: "12 Dec 2024, 9:15 • John Smith",
        statusChange: {
          from: "In progress",
          to: "Completed",
        },
      },
    ],
    // The onClose prop is optional and can be omitted
    onClose: () => alert("Close button clicked!"),
  };

  return (
    <div className="flex h-full w-full items-center justify-center bg-background p-4">
      <OrderStatusCard
        {...orderData}
        onContinue={() => alert("Continue button clicked!")}
      />
    </div>
  );
};

export default OrderStatusCardDemo;