Components
Loading preview...
Animated Activity Stats Card Description: A responsive and theme-adaptive card component designed to display key statistics and a corresponding bar chart. It's built to be highly reusable, with all content and data passed via props. The bar chart features smooth, staggered animations powered by framer-motion to enhance the user experience
@kavikatiyar
npx shadcn@latest add https://21st.dev/r/kavikatiyar/stats-cardimport { Footprints } from 'lucide-react';
import {
ActivityStatsCard,
type ChartDataPoint,
} from '@/components/ui/stats-card';
// Sample data for the demo
const sampleChartData: ChartDataPoint[] = [
{ label: '01', currentValue: 90, previousValue: 45 },
{ label: '02', currentValue: 60, previousValue: 75 },
{ label: '03', currentValue: 70, previousValue: 35 },
{ label: '04', currentValue: 50, previousValue: 65 },
{ label: '05', currentValue: 85, previousValue: 40 },
{ label: '06', currentValue: 75, previousValue: 68 },
{ label: '07', currentValue: 95, previousValue: 42 },
{ label: '08', currentValue: 60, previousValue: 30 },
];
export default function ActivityStatsCardDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-4">
<ActivityStatsCard
title="Running last week"
icon={<Footprints className="h-6 w-6" />}
mainValue="48,75 KM"
changeValue={2.1}
changeDescription="vs last week"
chartData={sampleChartData}
onActionClick={() => console.log('Action button clicked!')}
// 👇 Use the new props to change bar colors
primaryBarClassName="bg-violet-500"
secondaryBarClassName="bg-violet-200 dark:bg-violet-900"
/>
</div>
);
}