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
~50MSessions served
95%+Modelling effort reduced
Trend deltas
~900%Successful generationsafter clash visualisation
42%Time to outcomefaster than baseline
133Components in the libraryand counting
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.
$24,380Stacked, the default+8.4%
$24,380Inline, for KPI tiles+8.4%
Metrics band
The intended composition: a row of stats leading a report, replacing numbers buried in body copy. The figures here are demo data.
~900%Successful generationsclash visualisation
~400%Solution analysissame release
42%Faster outcomes
2×First-generation usability
// 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