Components
Loading preview...
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.
@kavikatiyar
npx shadcn@latest add https://21st.dev/r/kavikatiyar/progressimport { 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;