Stats Display

Display key metrics in a grid.

Q4 Performance

October through December 2024

Revenue

$847,300+12.4%

Active Users

25+8.2%

Churn Rate

2.1↓−0.8%

NPS Score

72+5%

<StatsDisplay  id="stats-display-business-metrics"  title="Q4 Performance"  description="October through December 2024"  stats={[      {          "key": "revenue",          "label": "Revenue",          "value": 847300,          "format": {              "kind": "currency",              "currency": "USD",              "decimals": 0          },          "sparkline": {              "data": [                  72000,                  68000,                  74000,                  81000,                  78000,                  85000,                  89000,                  91000,                  86000,                  94000,                  97000,                  102000              ],              "color": "var(--chart-1)"          },          "diff": {              "value": 12.4,              "decimals": 1          }      },      {          "key": "active-users",          "label": "Active Users",          "value": 24890,          "format": {              "kind": "number",              "compact": true          },          "sparkline": {              "data": [                  18200,                  19100,                  19800,                  20400,                  21200,                  21900,                  22600,                  23100,                  23800,                  24200,                  24500,                  24890              ],              "color": "var(--chart-3)"          },          "diff": {              "value": 8.2,              "decimals": 1          }      },      {          "key": "churn",          "label": "Churn Rate",          "value": 2.1,          "format": {              "kind": "percent",              "decimals": 1,              "basis": "unit"          },          "sparkline": {              "data": [                  3.2,                  3,                  2.8,                  2.9,                  2.7,                  2.5,                  2.4,                  2.3,                  2.2,                  2.1,                  2.1,                  2.1              ],              "color": "var(--chart-4)"          },          "diff": {              "value": -0.8,              "decimals": 1,              "upIsPositive": false          }      },      {          "key": "nps",          "label": "NPS Score",          "value": 72,          "format": {              "kind": "number"          },          "sparkline": {              "data": [                  58,                  61,                  64,                  62,                  65,                  68,                  66,                  69,                  70,                  71,                  71,                  72              ],              "color": "var(--chart-5)"          },          "diff": {              "value": 5,              "decimals": 0          }      }  ]}/>

Getting Started

Run this once from your project root.

npx shadcn@latest add @tool-ui/stats-display

Render StatsDisplay in your UI with tool-compatible props.

import { StatsDisplay } from "@/components/tool-ui/stats-display";export function Example() {  return (    <StatsDisplay      id="stats-example"      title="Q4 Performance"      description="October through December 2024"      stats={[        {          key: "revenue",          label: "Revenue",          value: 847300,          format: { kind: "currency", currency: "USD", decimals: 0 },          sparkline: { data: [72000, 68000, 74000, 81000, 78000, 85000, 89000, 91000, 86000, 94000, 97000, 102000], color: "var(--chart-1)" },          diff: { value: 12.4, decimals: 1 },        },        {          key: "active-users",          label: "Active Users",          value: 24890,          format: { kind: "number", compact: true },          sparkline: { data: [18200, 19100, 19800, 20400, 21200, 21900, 22600, 23100, 23800, 24200, 24500, 24890], color: "var(--chart-3)" },          diff: { value: 8.2, decimals: 1 },        },        {          key: "churn",          label: "Churn Rate",          value: 2.1,          format: { kind: "percent", decimals: 1, basis: "unit" },          sparkline: { data: [3.2, 3.0, 2.8, 2.9, 2.7, 2.5, 2.4, 2.3, 2.2, 2.1, 2.1, 2.1], color: "var(--chart-4)" },          diff: { value: -0.8, decimals: 1, upIsPositive: false },        },        {          key: "nps",          label: "NPS Score",          value: 72,          format: { kind: "number" },          sparkline: { data: [58, 61, 64, 62, 65, 68, 66, 69, 70, 71, 71, 72], color: "var(--chart-5)" },          diff: { value: 5.0, decimals: 0 },        },      ]}    />  );}

"use client";import { type Toolkit } from "@assistant-ui/react";import { StatsDisplay } from "@/components/tool-ui/stats-display";import {  safeParseSerializableStatsDisplay,  SerializableStatsDisplaySchema,} from "@/components/tool-ui/stats-display/schema";import { createArgsToolRenderer } from "@/components/tool-ui/shared";export const toolkit: Toolkit = {  showStats: {    description: "Display key metrics in a grid",    parameters: SerializableStatsDisplaySchema,    render: createArgsToolRenderer({      safeParse: safeParseSerializableStatsDisplay,      idPrefix: "stats",      render: (parsedArgs) => (          <StatsDisplay {...parsedArgs} />      ),    }),  },};

These snippets use assistant-ui for end-to-end wiring, but the StatsDisplay component itself is framework-agnostic at the UI layer: you can use it in any React codebase with any LLM SDK or tool-calling interface that can provide compatible props.