Stats Card

Cards 3

About

Stats Card A responsive card component designed to display a collection of key statistics. Each stat features a value, a label, and an associated icon. The component includes a subtle, staggered animation for each stat item, triggering as it enters the viewport. It is fully theme-adaptive, using shadcn/ui CSS variables for colors and styling.

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 { StatsCard } from "@/components/ui/stats-card-3"; // Adjust the import path
import { Store, MapPin, CalendarCheck2 } from "lucide-react"; // Using lucide-react for icons

// Component to render the icons with specific styling
const StatIcon = ({ children }: { children: React.ReactNode }) => (
  <div className="h-14 w-14 text-red-500/90">{children}</div>
);

// Data for the stats card, making it easy to manage and update
const statsData = [
  {
    value: "3,00,000+",
    label: "restaurants",
    icon: (
      <StatIcon>
        <Store className="h-full w-full" strokeWidth={1.5} />
      </StatIcon>
    ),
  },
  {
    value: "800+",
    label: "cities",
    icon: (
      <StatIcon>
        <MapPin className="h-full w-full" strokeWidth={1.5} />
      </StatIcon>
    ),
  },
  {
    value: "3 billion+",
    label: "orders delivered",
    icon: (
      <StatIcon>
        <CalendarCheck2 className="h-full w-full" strokeWidth={1.5} />
      </StatIcon>
    ),
  },
];

// The demo component
export default function StatsCardDemo() {
  return (
    <div className="flex min-h-[300px] w-full items-center justify-center bg-background p-4">
      <StatsCard stats={statsData} />
    </div>
  );
}