Card

Cards 202

About

Stat Card This card is designed to display a key metric, its title, and a percentage change from a previous period. It features a count-up animation for the main value and uses theme-aware colors for positive and negative trends.

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

Code

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

Usage.tsx

// demo.tsx
import { StatCard } from "@/components/ui/card-10";
import { ArrowUpRight, ArrowDownRight } from "lucide-react";

export default function StatCardDemo() {
  return (
    <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
      {/* Example 1: Positive Trend (based on your image) */}
      <StatCard
        title="Team member showed up"
        value={95}
        change={32}
        changeDescription="last week"
        icon={<ArrowUpRight className="h-4 w-4 text-green-600 dark:text-green-400" />}
      />

      {/* Example 2: Negative Trend */}
      <StatCard
        title="Bugs reported"
        value={12}
        change={-15}
        changeDescription="last month"
        icon={<ArrowDownRight className="h-4 w-4 text-red-600 dark:text-red-400" />}
      />
      
      {/* Example 3: Neutral/Slight Positive Trend */}
      <StatCard
        title="Server Uptime"
        value={99}
        change={0.5}
        changeDescription="last 24h"
        icon={<ArrowUpRight className="h-4 w-4 text-green-600 dark:text-green-400" />}
      />
    </div>
  );
}