Goal Tracker Card

Cards

About

Goal Tracker Card This component provides a visually appealing way to track progress towards a financial or personal goal. It features an image, title, animated percentage, and a segmented progress bar that animates into view.

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

Code

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

Usage.tsx

import { GoalTrackerCard } from '@/components/ui/goal-tracker-card'; // Adjust the import path

export default function GoalTrackerCardDemo() {
  return (
    <div className="flex min-h-[400px] w-full flex-col items-center justify-center gap-8 bg-background p-4">
      <GoalTrackerCard
        title="Vacation 2025"
        imageUrl="https://cdn.21st.dev/assets/mirror/35/35803c639de4d5c58b8d22eda1e2b48510c73ef5e7d248ad4db0ffe937ed84b0.jpg"
        currentAmount={2184}
        goalAmount={2500}
      />
      <GoalTrackerCard
        title="Buy a house"
        imageUrl="https://cdn.21st.dev/assets/mirror/bb/bb6fd55701a2a7f7f8f57c3ffe2742fd905c01420174e66436962dd6f9787089.jpg"
        currentAmount={182495}
        goalAmount={250000}
        totalSegments={35} // Example of customizing segment count
      />
    </div>
  );
}