KPI Scorecard
The numbers that matter, each with its trend and its target.
BeginnerWeb appDashboard8–18hAI-buildable 5/5no setupworth shipping
A compact executive scorecard: each metric shows its current value, sparkline, change against the previous period, and progress toward target. The design discipline is density — a lot of information that still reads at a glance.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- Metric tiles with current value, target and progress
- A sparkline per metric showing recent history
- Change against the previous period with direction indicated
- Metrics where down is good are handled correctly
- Tiles reorder by drag and can be resized
- A period selector applies across the whole board
- Layout persists across reloads
The interesting part
- Metrics where a decrease is an improvement need inverted colouring
- Sparklines that stay legible at very small sizes
- Density without the board becoming unreadable
Once it works
- Add drill-down from a tile to a full chart
- Add threshold alerts per metric
- Add annotations marking known events on the sparklines
Suggested stack
reacttypescripttailwindrechartsdnd-kit