Stats Card

Cards 242

About

Crypto Stats Card This component provides a comprehensive overview of the crypto market, including market cap, dominance distribution, and individual coin prices, all within a single, visually polished card.

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 { CryptoStatsCard } from "@/components/ui/stats-card-2"; // Adjust the import path

const CryptoStatsCardDemo = () => {
  // Mock data mimicking the structure from the image
  const marketCapData = {
    usd: 4000000000000, // 4T
    change: 7.79,
  };

  const sparklineChartData = [
    50, 52, 48, 55, 60, 58, 62, 70, 68, 75, 72, 80, 78, 85, 82, 70, 65, 72, 78, 88, 92, 90
  ];

  const dominanceData = [
    { name: "Bitcoin", percentage: 59.02, color: "bg-blue-500" },
    { name: "Ethereum", percentage: 13.11, color: "bg-red-500" },
    { name: "Others", percentage: 27.87, color: "bg-cyan-400" },
  ];

  const coinData = [
    {
      iconUrl: "https://cdn.21st.dev/assets/mirror/a6/a6bedd54bbe64a751afa252de092c38541728900fa2600c67bcdef1716996a37.svg",
      name: "Bitcoin",
      symbol: "BTCUSD",
      price: 118624,
      change: -0.04,
    },
    {
      iconUrl: "https://cdn.21st.dev/assets/mirror/84/84a4dbd00c651b0ebaae06918ee01ca4e287bf4b8dac743479a810312c840dc2.svg",
      name: "Ethereum",
      symbol: "ETHUSD",
      price: 4349.2,
      change: -0.04,
    },
  ];

  return (
    <div className="flex h-screen w-full items-center justify-center bg-background p-4">
      <CryptoStatsCard
        marketCapUSD={marketCapData.usd}
        marketCapChange={marketCapData.change}
        chartData={sparklineChartData}
        dominanceData={dominanceData}
        coinData={coinData}
      />
    </div>
  );
};

export default CryptoStatsCardDemo;