Data display

Stat tile

A key number with its label and how it changed.

import { StatTile } from '@jsonresume/ui'Source(opens in a new tab)

Examples

Dashboard

Applications

Up 12% vs last month

Interviews

No change vs last month

Median salary

$165k

For your top 5 skills

Days to reply

Down 3 days faster

Show code

stat-tile/dashboard.tsx

import { Grid, StatTile } from '@jsonresume/ui';

export default function StatTileDashboard() {
  return (
    <Grid minColumnWidth="11rem" gap={4}>
      <StatTile
        label="Applications"
        value={24}
        change={{ value: 12, period: 'vs last month' }}
      />
      <StatTile
        label="Interviews"
        value={5}
        change={{ value: 0, period: 'vs last month' }}
      />
      <StatTile
        label="Median salary"
        value="$165"
        unit="k"
        note="For your top 5 skills"
      />
      <StatTile
        label="Days to reply"
        value={9}
        change={{
          value: -3,
          period: 'faster',
          format: (n) => `${Math.abs(n)} days`,
        }}
        lowerIsBetter
      />
    </Grid>
  );
}

Usage

Do

Pair every number with what it means and a comparison.

Don’t

Show more than four or five tiles in a row.

Accessibility

A labelled group; the trend arrow is decorative and the change is spoken as "Up 12%".
lowerIsBetter flips which direction reads as good.

Props

Also accepts the attributes of the element StatTile renders.
Prop	Type	Default	Description
label required	string	–
value required	ReactNode	–
change	{ value: number; period?: string; format?: ((n: number) => string); }	–	Change since a previous period. Positive is good unless `lowerIsBetter`.
lowerIsBetter	boolean	false
note	ReactNode	–
unit	string	–