Stat Tile

One headline number with its change and a sparkline — the right answer more often than a chart.

Installation

bun add elia

@import "tailwindcss";
@import "@aile.sh/elia/styles/elia.css";
@source "../node_modules/@aile.sh/elia";

Usage

import { StatTile } from "@aile.sh/elia";

export function Example() {
  return (
    <div className="grid w-full gap-2.5 sm:grid-cols-3">
      <StatTile
        label="Requests"
        value="104.1k"
        delta={12.4}
        formatDelta={(v) => `${v > 0 ? "+" : ""}${v}%`}
        caption="vs. previous 30 days"
        sparkline={[42, 48, 45, 53, 61, 58, 67, 74, 81, 94]}
      />
      <StatTile
        label="p50 latency"
        value="198 ms"
        delta={-8.2}
        deltaTone="good"
        formatDelta={(v) => `${v}%`}
        caption="lower is better"
        sparkline={[280, 264, 251, 249, 232, 228, 219, 210, 204, 198]}
      />
      <StatTile
        label="Error rate"
        value="0.42%"
        delta={0.11}
        deltaTone="bad"
        formatDelta={(v) => `+${v}pp`}
        caption="vs. previous 30 days"
        sparkline={[0.2, 0.22, 0.19, 0.26, 0.31, 0.28, 0.35, 0.38, 0.4, 0.42]}
      />
    </div>
  );
}

— elia design system · MIT · charts · https://github.com/aile-sh/elia