Shipment Status Card

Cards

About

Shipment Status Card This component provides a visually appealing and informative card to display delivery or shipment status. It includes an image area, status details, and a primary call-to-action, all wrapped in a clean, animated container.

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

Code

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

Usage.tsx

import { ShipmentStatusCard } from "@/components/ui/shipment-status-card";
import { Clock, Truck } from "lucide-react";

export default function ShipmentStatusCardDemo() {
  return (
    <div className="flex h-full min-h-[500px] w-full items-center justify-center bg-background p-4">
      <ShipmentStatusCard
        imageUrl="https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-vB3yCpbqsZG8AszLPHliTtHLMv24hJ.png&w=1000&q=75"
        imageAlt="A package on a conveyor belt"
        title="Track Your Delivery"
        description="Monitor your shipment status in real-time. Stay informed about your delivery's progress every step of the way."
        buttonText="View Status"
        statusText="Your delivery is on its way!"
        statusIcon={<Truck className="h-4 w-4" />}
        timeIcon={<Clock className="h-4 w-4" />}
        onButtonClick={() => alert("Button clicked!")}
      />
    </div>
  );
}