Progress

Cards 294

About

Vo2 Max Card A visually polished card for displaying a key metric with an animated radial progress indicator. It's ideal for dashboards, fitness trackers, or any application needing to represent progress or a value within a range.

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

Code

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

Usage.tsx

import { Heart } from 'lucide-react';
import { Vo2MaxCard } from '@/components/ui/progress'; // Adjust the import path as needed

const Vo2MaxCardDemo = () => {
  return (
    <div className="flex min-h-[500px] w-full items-center justify-center bg-background p-4">
      <Vo2MaxCard
        title="Vo2 Max"
        value={51}
        status="Excellent"
        progress={51} // Represents the filled portion of the circle, e.g., 51%
        icon={<Heart size={20} />}
        description={
          <>
            Your Vo2 Max is in the{' '}
            <span className="font-semibold text-primary">Top 15%</span>
            <br />
            for your age and gender
          </>
        }
      />
    </div>
  );
};

export default Vo2MaxCardDemo;