Tracker Card

Cards 145

About

Proposal Tracker Card This component provides a clear, visual timeline for tracking the status of proposals or applications. It's designed to be flexible, allowing you to pass in step data dynamically. Animations are included using framer-motion to enhance the user experience.

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 { ProposalTrackerCard } from "@/components/ui/tracker-card-1";
import { CheckCircle2, Circle, FileText, Pencil } from "lucide-react";

const Demo = () => {
  // Sample data for the proposal tracker
  const proposalData = {
    imageUrl: "https://cdn.21st.dev/assets/mirror/df/df18ba94fb243cf00093b8002f9400d2e5d62c73c07807a3d7992b38406ee568.jpg", // Replace with your image source
    status: "Awaiting Documents",
    title: "Greenwich Village",
    price: 3200.00,
    buttonText: "Manage Proposal",
    steps: [
      {
        title: "Credit Assessment Approved",
        description: "View Details",
        date: "10th January, 10:40",
        status: "completed",
        icon: CheckCircle2,
      },
      {
        title: "Proposal Sent",
        description: "View proposal",
        date: "12th January, 13:24",
        status: "completed",
        icon: CheckCircle2,
      },
      {
        title: "Manage Documents",
        description: "View & Send Documents",
        status: "active",
        icon: FileText,
      },
      {
        title: "Contracts",
        description: "See Contract Template",
        status: "pending",
        icon: Pencil,
      },
    ],
  };

  return (
    <div className="flex h-full w-full items-center justify-center bg-background p-4">
      <ProposalTrackerCard
        imageUrl={proposalData.imageUrl}
        status={proposalData.status}
        title={proposalData.title}
        price={proposalData.price}
        steps={proposalData.steps}
        buttonText={proposalData.buttonText}
      />
    </div>
  );
};

export default Demo;