revido kit
Start building
← All components
data-display / stable

StatCard

Labelled metric on a Card — pipeline totals, forecast, overdue counts.

LIVE PREVIEW
Loading preview…

When to use

  • PageSummary metrics, dashboard KPI strips, report headlines.

Consider an alternative

  • Interactive cards that open a record — use Card variant="interactive".
  • Long prose or lists — StatCard is for one number.
  • Primary page actions — use Button, not StatCardAction.

Import

import { StatCard } from '@revido-llc/kit';

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.

label (required)ReactNode—Metric label (e.g. “Pipeline”).
value (required)ReactNode—The number or short value — use tabular numerals via the default styles.
actionReactNode—Optional drill-down control pinned to the bottom of the card — typically a `StatCardAction` (“View invoices”). Cards in a grid stretch to equal height so every action sits on the same baseline. For a whole-card open target, use `Card variant="interactive"`.
detailReactNode—Optional context under the value (period, unit, delta). Always above the action.
iconComponentType<{ className?: string; "aria-hidden"?: boolean; }>—Optional leading icon next to the label.
valueClassNamestring—Extra classes on the value (e.g. `text-success`).
childrenReactNode—
classNamestring—

Related exports

StatCardAction

Examples

Metrics row

<StatCard label="Pipeline" value="$128k" detail="12 open" />
<StatCard label="Won (MTD)" value="$42k" detail="+8%" valueClassName="text-success" />

Aligned footer actions

<StatCard
  label="Receivables"
  value="$73.5k"
  detail="12 open"
  action={<StatCardAction onPress={openOutstanding}>View outstanding</StatCardAction>}
/>

Related components