About
Package Tracker Card This component provides a visually appealing card to display package tracking information. It's designed to be highly reusable, accepting props for status, package details, destination, and more.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Tracker Card to your project and fits it to your theme.
Code
How Tracker Card is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import React from 'react';
import { PackageTrackerCard, PackageTrackerCardProps } from '@/components/ui/tracker-card';
const PolandFlag = () => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 3" className="h-4 w-6 rounded-sm">
<rect width="5" height="3" fill="#fff" />
<rect width="5" height="1.5" y="1.5" fill="#dc143c" />
</svg>
);
const PackageTrackerCardDemo = () => {
const trackingUrl = 'https://21st.dev/track/49029880150810129411';
const cardProps: PackageTrackerCardProps = {
status: 'Out for Delivery',
packageNumber: '49029880150810129411',
destination: 'Poland',
destinationFlag: <PolandFlag />,
date: 'Poland - 01/06/25',
// UPDATED: Using an image URL for the QR code
qrCodeImageUrl: `https://api.qrserver.com/v1/create-qr-code/?size=128x128&data=${encodeURIComponent(trackingUrl)}&bgcolor=none&color=0-0-0`,
packageImage: (
<img
src="https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-cfG5HFRLtZ568wRFDk8NRn7hzW00fY.png&w=320&q=75"
width={200}
height={200}
className="drop-shadow-lg"
/>
),
onTrackClick: () => alert('Tracking details button clicked!'),
};
return (
<div className="flex h-full min-h-screen w-full items-center justify-center bg-background p-4">
<PackageTrackerCard {...cardProps} />
</div>
);
};
export default PackageTrackerCardDemo;