Card

Cards 151

About

Shipment Card – Real-time delivery update. Displays live order status with tracking option for better customer experience.

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

Code

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

Usage.tsx

import { StatusCard } from "@/components/ui/card-24"; // Adjust import path
import { Button } from "@/components/ui/button"; // Example: using shadcn button
import { PackageCheck } from "lucide-react"; // Restored for the icon

// The demo component that showcases the StatusCard
export default function StatusCardDemo() {
  return (
    <div className="flex h-full w-full items-center justify-center bg-background p-4">
      <StatusCard
        icon={<PackageCheck className="h-6 w-6" />}
        title="On its way"
        description="Your order has been dispatched and is now with the courier."
        illustration="https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-uBD2X8E9FMFPGgAZv0YYRXCMZbaJTt.png&w=320&q=75"
        illustrationAlt="An illustration of a person on a bicycle with a delivery package."
      >
        <Button variant="outline" size="sm">
          Track Package
        </Button>
      </StatusCard>
    </div>
  );
}