Stat Card React chart component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Stat Card is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import StatCard from @/components/ui/stat-card.

import { Clock, FileText, UserPlus, Wallet } from "lucide-react"
import { StatCard, StatGroup } from "@/components/ui/stat-card"

export function DashboardKpis({ daily }: { daily: number[] }) {
  return (
    <StatGroup variant="joined">
      <StatCard
        label="Revenue"
        icon={<Wallet />}
        value={128450}
        format="currency"
        delta={12.4}
        deltaLabel="vs. last month"
        sparkline={daily}
        goal={190000}
        locale="en-US"
       
      />
      <StatCard label="Invoices issued" icon={<FileText />} value={342} delta={8} deltaFormat="number" locale="en-US" />
      <StatCard label="New clients" icon={<UserPlus />} value={27} delta={-3.1} locale="en-US" />
      <StatCard
        label="Average time to payment"
        icon={<Clock />}
        value={18 * 86400}
        format="duration"
        delta={-2.5}
        formatDelta={(d) => `${d.toLocaleString("en-US")} days`}
        invertTrend
        locale="en-US"
       
      />
    </StatGroup>
  )
}

Props

• labeldefault ""
  ReactNode

  What the number is, in the header; truncates with a title on narrow tiles. When empty the playground shows a sample that follows format (Revenue for currency).

• valuedefault 128450
  number | string | null

  The number. It counts up and is formatted by format; a string renders as is (no animation); null or no value shows emptyValue. The playground starts at a sample 128450; the component's default is null.

• formatdefault "number"
  "number" | "currency" | "percent" | "compact" | "duration" (StatValueFormat)

  How the number reads, in the locale: 128,450, $128,450 (see symbolDisplay), 12.4% (value 12.4), 128.5K, or a duration from seconds in its largest two units ("2 hr, 15 min", "18 days").

• currencydefault "USD"
  string

  ISO 4217 code for format="currency" and deltaFormat="currency", printed with its narrow symbol ("$", "€", "£").

• decimalsdefault "auto"
  "auto" | "0" | "1" | "2" | "3" | number

  Fraction digits of the value. auto: 0 for numbers from 100 up, the currency's digits below 1.000 (0 above), 1 for percent and compact. Fixed from the final value, so the count never changes width mid-way.

• prefixdefault ""
  ReactNode

  Text before the number for units format does not know, set smaller and muted ("≈").

• suffixdefault ""
  ReactNode

  Text after the number ("km", "/mo", "pcs").

• deltadefault 12.4
  number | null

  The change vs the previous period, in deltaFormat units (12.4 is +12.4% with percent). Its sign sets the arrow; |delta| below 0.05 is flat. The playground's sample is 12.4; the component has none (no pill).

• deltaFormatdefault "percent"
  "percent" | "number" | "currency" | "duration" (StatDeltaFormat)

  Unit of delta: +12.4%, +8, +$1,250, or seconds as a duration (+2 days, 12 hr).

• trenddefault "auto"
  "auto" | "up" | "down" | "flat"

  The arrow. auto reads the sign of delta; set it to force a direction (a pill with only an arrow when there is no delta). For your own delta badges and tables the helpers the card uses are exported too (see Parts).

• deltaLabeldefault ""
  ReactNode

  The comparison after the pill, like "vs. last month". Also read in the spoken sentence.

• perioddefault ""
  ReactNode

  A quiet caption at the end of the header, like "Sept. 2026".

• infodefault ""
  ReactNode

  What the metric means, on an info button beside the label: a tooltip on hover or focus, and on a tap on touch screens.

• goaldefault 190000
  number

  Adds a goal bar (value / goal) with "68% of goal" and the formatted target. Numbers only; 0 or less hides it. The playground's sample is 190000; the component has none.

• emptyValuedefault "–"
  ReactNode

  Shown, muted, when value is null or missing. The playground's readout shows it; clear value in code to see it in the card.

• sizedefault "md"
  "sm" | "md" | "lg"

  sm: compact (20px value, p-3, the sparkline at the end of the value row, 48 x 20); md: 28px value, p-4 / p-5, a 40px chart; lg: the hero (32px, 48px from 768px up, p-5 / p-6, a 64px chart).

• variantdefault "surface"
  "surface" | "card" | "outline" | "plain"

  surface: a raised white panel (dark: #1A1A1A) with the raised shadow; card: a flat gray tile; outline: a hairline border; plain: no container and no padding, for cards inside your own panel.

• radiusdefault "md"
  "none" | "sm" | "md" | "lg"

  Corners: 0, 12px, 16px or 24px.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Accent of the icon tile, the sparkline and the goal bar. The delta never takes it: it is green or red by meaning.

• colordefault ""
  string

  Any CSS color; replaces the tone for the icon tile, sparkline and goal bar.

• iconTonedefault ""
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The icon tile's own tint, independent of tone: a green Pro tile or an orange revenue tile over a neutral sparkline. Unset, the tile follows tone.

• symbolDisplaydefault "inline"
  "inline" | "muted" (StatSymbolDisplay)

  The currency symbol of format="currency": at the number's size and weight ("$0", "$128,450"), or smaller and muted beside it.

• flatDeltadefault "label"
  "label" | "value" | "hidden" (StatFlatDelta)

  How a change under 0.05 reads: a neutral "No change" pill (labels.unchanged), the zero value ("0%"), or no pill at all. A null delta never shows a pill.

• sparklineTypedefault "area"
  "line" | "area" | "bar"

  The built-in sparkline: a line, a line over a soft gradient, or bars with the last one highlighted.

• durationDisplaydefault "short"
  "long" | "short" | "narrow"

  Unit words for format="duration" and deltaFormat="duration": 2 ore 15 minute, 2 ore 15 min., 2 h 15 m.

• invertTrenddefault false
  boolean

  Down is good: costs, churn, response time. A drop turns green and a rise red; the arrow still points the real way.

• loadingdefault false
  boolean

  Skeletons with the real sizes for the value, delta, chart and goal; the label stays. aria-busy is set. When it turns false the number counts up.

• animationdefault "count"
  "count" | "roll" | "none"

  count: tweens from 0 the first time the card is seen, then from the previous value; roll: the AnimatedCounter odometer for live numbers (numbers and currency; changes roll, the first paint is final); none: static.

• durationdefault 900
  number

  Milliseconds of the count (roll uses 70% of it per digit).

• localedefault ""
  string

  Intl locale for every number. Empty uses the UIProvider locale, then the page language. The demo falls back to en-US.

• icon
  ReactNode

  The header icon, in a tile: gray when neutral, tinted with the tone otherwise.

• sparkline
  number[]

  Values for the built-in sparkline, oldest first. One point draws a dot; equal values draw a flat line. The chart alone is exported as Sparkline (see Parts).

• chart
  ReactNode

  Replaces the sparkline with your own chart, in the same spot.

• goalLabel
  (percent: number) => ReactNode

  The goal bar caption; defaults to labels.goal ("68% of goal").

• formatValue
  (value: number) => string

  Full control over the number text. Called on every frame of the count, so keep it cheap.

• formatDelta
  (delta: number) => string

  The delta text in place of deltaFormat. It gets |delta|; the sign is added (d => `${d} days`).

• action
  ReactNode

  A control at the end of the header (a ⋯ menu button). It stays clickable on pressable cards.

• hrefdefault ""
  string

  Makes the whole card a link: press, hover lift, focus outline and a chevron hint (always shown on touch). Its accessible name is the label plus the spoken value and delta. The info button and the action slot stay clickable on top. The demo's link does not navigate.

• selecteddefault false
  boolean

  For a pressable card that filters or picks something (a status tile over a table): a 2px ring in the tone, aria-pressed on the button (onClick) or aria-current on the link (href). Leave it undefined on plain links.

• linkProps
  Omit<ComponentProps<"a">, "href" | "onClick" | "children" | "className">

  Extra attributes for the link that covers an href card: target, rel (target="_blank" gets noopener), download, data-*.

• onClick
  (event: MouseEvent<HTMLElement>) => void

  Makes the whole card a button (or runs alongside href).

• footer
  ReactNode

  A row under a hairline that runs edge to edge ("View report →").

• children
  ReactNode

  Extra content under the numbers, above the chart.

• labels
  Partial<StatCardLabels>

  Strings: increase / decrease (text => "Up 12.4%"), unchanged ("No change"), goal (percent => "68% of goal"), info ("About this metric"), loading. The English defaults are exported (see Parts).

• classNames
  Partial<Record<"header" | "icon" | "label" | "info" | "period" | "action" | "value" | "unit" | "delta" | "deltaLabel" | "chart" | "goal" | "footer", string>>

  Extra classes for the inner parts.

• className
  string

  Extra classes for the card, merged last. For a row of cards use StatGroup (see Parts).

Parts

FAQ

Used in

More React chart and stat components