asafefe.dev

Stat Card

New

A KPI tile. The number counts up, the delta badge colors itself by direction, and a sparkline draws in.

motionlucide-reactutils@soultel/use-reduced-motion-safe
MRRUp 12.4% vs last month
$48,290vs last month
Active usersUp 5.2% vs last month
2,841vs last month
ChurnDown 0.4% vs last month
1.9%vs last month
Response timeUp 8.2% vs last month
184 msvs last month

Installation

$ pnpm dlx shadcn@latest add @soultel/stat-card

No namespace set up? npx shadcn@latest add https://asafefe.dev/r/stat-card.json works too.

Manual installation
  1. 1. Install the dependencies.
    terminal1 lines
    npm install motion lucide-react
  2. 2. Copy the source from the Code tab into components/stat-card.tsx.

Usage

example.tsx13 lines
import { StatCard } from "@/components/stat-card"

export function Revenue() {
  return (
    <StatCard
      label="MRR"
      value={48290}
      format={{ style: "currency", currency: "USD", maximumFractionDigits: 0 }}
      delta={12.4}
      data={[31, 33, 32, 36, 38, 37, 41, 44, 43, 48]}
    />
  )
}

Props

PropTypeDefaultDescription
labelstring-Metric name.
valuenumber-Current value.
formatIntl.NumberFormatOptions-e.g. { style: "currency", currency: "USD", maximumFractionDigits: 0 }.
deltanumber-Percent change. Negative values point down.
deltaLabelstring"vs last month"What the delta compares against.
invertbooleanfalseTreat a drop as good news, for churn or latency.
data / dataLabelsnumber[] / string[]-Sparkline values, oldest first, with optional hover labels.
iconReactNode-Small icon beside the label.