Tracker Card

Cards 148

About

Calorie Tracker Card A visually engaging card to track daily calorie intake. It features an animated counter, a dynamic progress bar, and a list for food suggestions, all styled using shadcn/ui principles.

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 { Pizza } from "lucide-react";
import { CalorieTrackerCard } from "@/components/ui/tracker-card";

export default function CalorieTrackerDemo() {
  // Sample data for the component
  const foodSuggestions = [
    { name: "One bowl of salad and salmon", calories: 285 },
    { name: "Oven Baked Chicken breast", calories: 482 },
  ];

  const handleRecordClick = () => {
    // You can add your custom logic here, e.g., open a modal
    alert("Record button clicked!");
  };

  return (
    <div className="flex h-full w-full items-center justify-center bg-background p-4">
      <CalorieTrackerCard
        icon={<Pizza className="h-6 w-6" />}
        title="Daily Calories"
        subtitle="Calories consumption in a day"
        currentCalories={582}
        goalCalories={2250}
        suggestions={foodSuggestions}
        onRecord={handleRecordClick}
      />
    </div>
  );
}