Metric Card

One number that matters, with its change against a past period and room for a sparkline.

$ pnpm dlx shadcn@latest add https://dashral.com/r/metric-card.json

Revenue

$48,250

Up +12.4%vs last month

Orders

1,284

Down −3.1%vs last month

Response time

1.8 hr

Down −22%faster than last month

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/metric-card.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/metric-card

Usage

example.tsx

1import { MetricCard } from "@/components/dashral/metric-card"
2
3<MetricCard
4  label="Revenue"
5  value={48250}
6  formatOptions={{ style: "currency", currency: "USD" }}
7  change={12.4}
8  changeLabel="vs last month"
9/>

Examples

Live value

A new value counts up from the old one.

Visitors right now

2,418

Up +8%vs an hour ago

New values count up from the old one (they jump with reduced motion).

KPIs that drive a chart

The cards are tabs for the chart below (click or arrow keys); the period counts every number to its new value.

Store overview

Revenue

$48,920

Up +12.5%vs previous month

Orders

1,486

Up +4.4%vs previous month

Conversion

3.1%

Down −0.2 ptsvs previous month

Refunds

$3,120

Up +6.5%vs previous month

Revenue, last 30 days

Realtime

Updates every few seconds while the page is visible; the bars shift along as the number counts.

Active users · live

296

Up +13%vs 15 minutes ago

API reference

MetricCard

Also takes every prop of <div>(opens in a new tab).

Prop	Type	Default
`label`	`ReactNode` What's measured. Required.	—
`value`	`number \| null` Required. null reads “—”.	—
`formatOptions / locale`	`Intl.NumberFormatOptions / string` e.g. { style: "currency", currency: "USD" }.	`LocaleProvider's`
`formatValue`	`(value: number) => string` Writes the value yourself, for what Intl can't (e.g. “2m 05s”). From a client component.	—
`change`	`number \| null` Change against the comparison period.	—
`changeUnit`	`string` " pts" for a change in a rate.	`"%"`
`countOnMount`	`boolean` Count up from 0 when the card first shows.	`false`
`changeLabel`	`ReactNode` e.g. "vs last month".	—
`invert`	`boolean` Down is good (costs, churn): a fall shows in green.	`false`
`icon`	`ReactNode` Shown in the corner.	—
`children`	`ReactNode` Under the numbers, e.g. a Sparkline.	—

Accessibility

The change says “Up” or “Down” in words for screen readers, not just with an arrow and a color.
While the number counts, screen readers get the final value once.

Motion

A new value counts up (or down) from the old one, over about 1.5 × --duration-considered. Not with reduced motion.
With countOnMount it also counts from 0 when it first shows; the server's final number is there without JavaScript.