Data displayGenerated from the public API

StatCard

One number, its context and its trend in a single scannable surface.

@luc/ui/data

Examples

Default

Sharpe

+0.06%

<StatCard label="Sharpe" value={1.24} delta={0.06} kind="decimal" />

Usage

import { StatCard } from "@luc/ui/data";

<StatCard
  label="Sharpe, 12 months"
  value={1.24}
  delta={0.06}
  kind="decimal"
/>

Package setup — peer requirements, the stylesheet and the provider — is on installation.

API

Read from the published TypeScript API, so a prop that is not listed here does not exist and a default that is listed is the one the compiler sees.

Exported symbols
Export	Kind	Signature
`StatCard`	17 documented props	`({ className, label, value, delta, deltaLabel, invertDelta, icon, aside, visual, footer, size, kind, currency, suffix, minimumFractionDigits, maximumFractionDigits, selected, interactive, ...props }:…`

StatCard props

Type: StatCardProps

Values the compiler reads from the declaration.

StatCard props
Prop	Type	Default	Notes
`aside?`	`ReactNode`	`—`	Right-aligned slot on the header row.
`currency?`	`string \| undefined`	`—`
`delta?`	`number \| null \| undefined`	`—`	Period-over-period change, rendered as a `Delta`.
`deltaLabel?`	`ReactNode`	`—`
`footer?`	`ReactNode`	`—`	Footer line: freshness, provenance, unit.
`icon?`	`ReactNode`	`—`	Small leading slot: icon, status dot, or asset mark.
`interactive?`	`boolean \| undefined`	`—`
`invertDelta?`	`boolean \| undefined`	`—`
`kind?`	`NumericFormatKind \| undefined`	`—`
`label`	`ReactNode`	`—`
`maximumFractionDigits?`	`number \| undefined`	`—`
`minimumFractionDigits?`	`number \| undefined`	`—`
`selected?`	`boolean \| undefined`	`—`
`size?`	`MetricSize \| undefined`	`—`
`suffix?`	`string \| undefined`	`—`
`value`	`number \| null \| undefined`	`—`
`visual?`	`ReactNode`	`—`	Chart or visualisation slot under the value.

Guidelines

Use the card when the figure is a destination the reader can open (`interactive`) or the anchor of a small group.
Set `invertDelta` where a rise is bad, so the delta's colour follows the meaning of the metric.

Don't

Repeat the unit inside `label` and `suffix`; one of the two is the unit, the other is the name.

Accessibility

An interactive card is a single named control, not a card containing a link, and its label is the metric rather than the number. `selected` is exposed as state rather than as colour alone.

Family

Data display

Dense, sortable, scannable: the surfaces a real product reads numbers from.

17 documented entries in this family. Open the family index