Stat

A big number followed by its word, no box. MetricRow lines up three to five; StatGrid holds tiles.

12,480requests

$184.20total spend+12%

1.2 smedian latency

<MetricRow>
      <Stat value="12,480" unit="requests" />
      <Stat value="$184.20" unit="total spend" delta={{ label: "+12%", tone: "neutral" }} />
      <Stat value="1.2 s" unit="median latency" />
    </MetricRow>

import { Stat, MetricRow, StatGrid, StatTile } from "@logicplanes/kaeso-ui";

Props

delta
{ label: string; tone?: "neutral" | "success" | "danger"; }
A delta badge: "+12%".
size
"md" | "sm" = md
The size of the number.
unit
ReactNode
The word after it, on the same baseline: "total spend", "sessions".
value
ReactNode
The number, already formatted: "$12.40", "1.2M".