Stat Card

Installation

pnpm dlx shadcn@latest add @ffg/stat-card

Usage

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

<StatCard
  label="Total volume"
  rawNum={48250}
  prefix="$"
  trend="+12.4% vs. last month"
  scope="org"
/>

A framed metric tile used across the dashboard. Pass rawNum for a numeric value that counts up from zero (with an optional prefix), or value for a pre-formatted string. Props:

• label — the metric name, shown with an info glyph
• value / rawNum — a pre-formatted string, or a number to count up
• prefix — prepended to the counted-up number (e.g. $)
• trend — a trend line rendered beside the trending-up icon
• onClick — wires up the corner open button
• scope — re-keys the value + trend so they replay their fade when it changes

The count-up uses the shared useCountUp hook (cubic ease-out). When scope changes, only the value and trend replay the global ffg-stat-refresh fade — the card frame stays put.

Dark mode: the card frame maps to bg-card with a faint border-border (strengthening to the divider on hover); label, value, and trend use the foreground / muted token pairs so they invert correctly.