"use client"; import { type ReactNode, useId, useRef } from "react"; import { motion, useInView } from "motion/react"; import { TrendingDown, TrendingUp } from "lucide-react"; import { cn } from "@/lib/utils"; export interface StatCardProps { label: string; value: ReactNode; /** Period-over-period change in %. Its sign drives the arrow and color. */ delta?: number; /** Small muted qualifier, e.g. "vs last week". */ hint?: string; icon?: ReactNode; /** Optional sparkline series; drawn and animated the first time in view. */ data?: number[]; className?: string; } function sparkPath(data: number[], w: number, h: number) { const min = Math.min(...data); const max = Math.max(...data); const span = max - min || 1; return data .map((d, i) => { const x = (i / (data.length - 1)) * w; const y = h - ((d - min) / span) * h; return `${i === 0 ? "M" : "L"}${x.toFixed(2)},${y.toFixed(2)}`; }) .join(" "); } /** * StatCard — a KPI tile: a label, a prominent value, an optional trend delta * (green up / red down) and a gradient sparkline that draws itself the first * time the card scrolls into view. */ export function StatCard({ label, value, delta, hint, icon, data, className, }: StatCardProps) { const id = useId(); const ref = useRef(null); const inView = useInView(ref, { once: true, amount: 0.5 }); const up = (delta ?? 0) >= 0; const path = data && data.length > 1 ? sparkPath(data, 100, 32) : ""; return (

{label} {icon && {icon}}

{value}

{(delta !== undefined || hint) && (

{delta !== undefined && ( {up ? ( ) : ( )} {up ? "+" : ""} {delta}% )} {hint && {hint}}

)}

{path && ( )}

); }

Prop	Type	Default	Description
`label`*	`string`	`—`	Metric name.
`value`*	`ReactNode`	`—`	The prominent value.
`delta`	`number`	`—`	Period-over-period % change; sign drives arrow + color.
`hint`	`string`	`—`	Small qualifier, e.g. "vs last week".
`data`	`number[]`	`—`	Sparkline series, animated on view.
`className`	`string`	`—`	Extra classes.

Stat Card

Customize

Props