Stat card

A figure with its delta and a sparkline. The delta knows whether up is good, the value uses tabular figures, and a group splits several stats with hairlines instead of nesting cards.

Markdown

On this page

Four figures split by hairlines, with deltas that know which direction is good and sparklines.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/stat-card.json

Usage

tsx

import { StatCard, StatCardGroup } from "@/components/ui/chatcn/stat-card"

<StatCardGroup>
  <StatCard
    label="p95 latency"
    value={121}
    unit="ms"
    delta={{ value: -0.31, label: "vs last week" }}
    goodDirection="down"
    trend={weekly}
  />
</StatCardGroup>

Examples

Loading, large and text

A skeleton, the large size and a value that is text, not a number.

Props

Prop	Type	Notes
`label`	`ReactNode`
`value`	`number \| string`	Numbers format with `format`
`format`	`"number" \| "compact" \| "percent" \| "currency"`
`unit`, `currency`, `locale`
`delta`	`{ value, format?, label? }`	Signed. Percent by default
`goodDirection`	`"up" \| "down" \| "neutral"`	Picks green or red for the delta. Neutral stays gray
`trend`	`number[]`	Oldest first. The last point is drawn in ink
`hint`	`ReactNode`	One quiet line
`size`	`"default" \| "lg"`
`loading`, `streaming`	`boolean`	Skeleton at the final size

Accessibility

The delta always has an arrow and a hidden Up or Down, so its meaning never rests on color.
The sparkline is hidden from screen readers and replaced by one sentence with the first and last values.

Motion

None. Figures update in place without count-up.