data-display / stable
StatGroup
Equal compact metric tiles on one surface, with values above labels and source hints.
LIVE PREVIEW
Loading preview…
When to use
- Record rails and compact tracking summaries with two or three related numbers.
- Drawer and page summaries of up to four or five numbers: the group fits its container, one row when there is room and two per row when not.
Consider an alternative
- Dashboard headlines — use StatCard.
- Prose properties — use PropertyGrid.
Import
import { StatGroup } from '@revido-llc/kit';Keyboard interaction
- Tab — focus a metric and show its source hint
- Enter / Space — toggle the hint
- Escape — dismiss the hint
Props
Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.
Examples
Tracking strip
<StatGroup items={[{ label: "Estimate", value: "4–7 SP", hint: "Sum of task estimates." }, { label: "Recorded", value: "3 SP" }, { label: "Completed", value: "2 SP" }]} />Empty and editable
<StatGroup items={[{ label: "Estimate", value: null }, { label: "Recorded", value: <Button variant="ghost" size="xs" onPress={editActual}>0 SP</Button> }]} />Tracking rail states
A local fixture for pointer and keyboard checks; edits only affect this example.
<StatGroup items={[{ label: "Estimate", value: "4–7 SP", hint: "Sum of task estimates." }, { label: "Recorded", value: "7 SP" }, { label: "Completed", value: "7 SP" }]} />Narrow rail
Too narrow for one row, the tiles pair up two per row; labels wrap and values stay whole.
<StatGroup items={[{ label: "Estimate", value: "120–180 SP" }, { label: "Recorded", value: "123.75 SP" }, { label: "Completed", value: "99.25 SP" }]} />Drawer summary
Four numbers in a drawer: one row when the drawer is wide enough, two per row when it is not. Dividers follow the layout.
<StatGroup items={[
{ label: "Fee so far", value: "$1,417.50" },
{ label: "If they finish their list", value: "$1,890.00" },
{ label: "Funding", value: "100%" },
{ label: "Carried in", value: "0" },
]} />