Tracker Card

Cards 302

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;