Stats Card

Cards 193

About

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

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

Code

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

Usage.tsx

import { 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>
  );
}