Headline metrics with labels and trend deltas
A Stat gives one number room to speak: display-weight numeral, quiet label, and an optional trend annotation. Compose several in a row for the metrics band that opens a dashboard or a report.
Sizes
Trend deltas
Delta placement
Where the delta sits is a prop. The default stacks it at the bottom, under the label; deltaPlacement="inline" moves it to the top, riding the value's baseline, which is the arrangement dashboard KPI tiles want. deltaPlacement="auto" chooses by the room it has: inline in a wide tile, stacked once the tile is narrow, such as two KPI tiles side by side on a phone. It fills its parent and reads its own width, so it restacks wherever it sits.
Metrics band
The intended composition: a row of stats leading a report, replacing numbers buried in body copy. The figures here are demo data.
// From the npm package
import { Stat } from 'rift-ds/components/Stat/Stat';
// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/stat.json