React data display components

Tables, charts and meters for dashboards and AI products – a data table, KPI and breakdown charts, a usage meter and a summary of what changed.

The charts are drawn inside the file itself, so there is no chart library to install.

7 React components – 1 free.

Breakdown Chart – Stacked bar chart with measure, slice and segment pickers, a hover breakdown and a linked table
Change Summary – What moved since last time – one metric per row with a colored trend
Compact Breakdown – A total split into its parts in one small card – numbers roll, the bar glides and the ranked rows trade places when the period changes
Data Table – Spreadsheet-style table: select cells and ranges, edit in place, copy and paste, undo and sort
Experiment Card – An A/B test in two lines that quietly unfolds on hover – variants linked to a tiny chart, a metric switch with rolling numbers, and a winner you pick with a click
KPI Chart – Metric card with a multi-line chart and a tooltip that follows the pointer
Usage Meter – Plan usage and AI credits – a stacked credits meter by category, daily sparkline, limits and a button that speaks up near the limit