Components
Loading preview...
Animated Progress Card Description: A card component designed to display a specific goal or statistic. It features a title, an icon, an animated progress bar, and customizable labels to track progress over time. The card is fully responsive and adapts to both light and dark themes using shadcn/ui's CSS variables.
@lavikatiyar
npx shadcn@latest add https://21st.dev/r/lavikatiyar/progress-cardimport { AnimatedProgressCard } from "@/components/ui/progress-card";
import { Timer, Code2 } from "lucide-react"; // Example icons
/**
* A demo page to showcase the AnimatedProgressCard component.
*/
export default function AnimatedProgressCardDemo() {
return (
<div className="flex min-h-screen w-full flex-col items-center justify-center gap-8 bg-background p-4">
{/* Example 1: Running Progress (from the image) */}
<AnimatedProgressCard
title="Running last week"
icon={<Timer className="h-5 w-5 text-primary-foreground" />}
progressLabel="Your Progress"
progressSubLabel="Since 20 days ago"
currentValue={152}
maxValue={160}
/>
</div>
);
}