# Stat Card

> A KPI card with label, value, delta and an inline sparkline generated from your data points.

- Category: Data display
- Type: component
- License: MIT (free)
- Page: https://niceui.dev/components/stat-card

## Installation

```bash
npx shadcn@latest add https://niceui.dev/r/stat-card.json
```

Or copy the source below into `components/ui/stat-card.tsx`.

## Source

```tsx
import * as React from "react";

export interface StatCardProps {
  label: string;
  value: string;
  delta?: string;
  trend?: number[];
  className?: string;
}

function toPath(points: number[], w = 120, h = 32) {
  const max = Math.max(...points);
  const min = Math.min(...points);
  const range = max - min || 1;
  return points
    .map((p, i) => {
      const x = (i / (points.length - 1)) * w;
      const y = h - 4 - ((p - min) / range) * (h - 8);
      return (i === 0 ? "M" : "L") + x.toFixed(1) + " " + y.toFixed(1);
    })
    .join(" ");
}

export function StatCard({ label, value, delta, trend, className = "" }: StatCardProps) {
  return (
    <div
      className={[
        "w-full max-w-[240px] rounded-xl border border-white/10 bg-zinc-950 p-[18px]",
        className,
      ].join(" ")}
    >
      <div className="flex items-center justify-between">
        <span className="text-xs text-zinc-400">{label}</span>
        {delta && <span className="font-mono text-[11px] text-sky-300">{delta}</span>}
      </div>
      <div className="mb-2.5 mt-0.5 text-[30px] font-medium tabular-nums tracking-[-0.04em] text-zinc-100">
        {value}
      </div>
      {trend && trend.length > 1 && (
        <svg viewBox="0 0 120 32" preserveAspectRatio="none" className="h-8 w-full">
          <path d={toPath(trend)} fill="none" stroke="#7dd3fc" strokeWidth="1.5" />
        </svg>
      )}
    </div>
  );
}
```

## Usage

```tsx
import { StatCard } from "@/components/ui/stat-card";

export default function Example() {
  return (
    <StatCard
      label="Monthly revenue"
      value="$48,290"
      delta="+12.4%"
      trend={[4, 8, 6, 14, 12, 20, 18, 26, 24]}
    />
  );
}
```