Components
Loading preview...
Activity Stats Card A visually polished card component to display a key metric with an icon, title, and subtext. It features a count-up animation for the primary metric and is built to be easily customized through props.
@lavikatiyar
npx shadcn@latest add https://21st.dev/r/lavikatiyar/activity-stats-cardimport { StatsCard } from "@/components/ui/activity-stats-card"; // Adjust the import path
import { Activity } from "lucide-react"; // FINAL CORRECTION: Use the 'Activity' icon
export default function StatsCardDemo() {
return (
<div className="flex h-full w-full items-center justify-center bg-background p-4">
<StatsCard
title="Morning Run"
metric={4.91}
metricUnit="K"
subtext="302 Calories"
icon={<Activity className="h-6 w-6" />}
iconContainerClassName="bg-indigo-500 text-white"
/>
</div>
);
}