Components
Loading preview...
Shipment Card – Real-time delivery update. Displays live order status with tracking option for better customer experience.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/card-24import { 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>
);
}