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%

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 },        },      ]}    />  );}

Features

Auto-responsive grid

CSS grid with auto-fit adapts to container width

Inline sparklines

Pure SVG trend visualization without external dependencies

Delta indicators

Semantic colors with upIsPositive for metrics where down is good

Format options

Currency, percent, number, and text with locale support

Single-stat hero mode

Pass a single stat for a larger, centered presentation

Copy components/tool-ui/stats-display and the shared directory into your project. The shared folder contains utilities used by all Tool UI components. The tool-ui directory should sit alongside your shadcn ui directory.

Prerequisites

This component requires the following shadcn/ui components:

pnpm dlx shadcn@latest add card

Directory Structure

action-buttons.tsx

schema.ts

index.ts

...

stats-display.tsx

sparkline.tsx

schema.ts

index.tsx

error-boundary.tsx

Download

Usage

"use client";import { makeAssistantTool } from "@assistant-ui/react";import {  StatsDisplay,  StatsDisplayErrorBoundary,  parseSerializableStatsDisplay,  SerializableStatsDisplaySchema,  type SerializableStatsDisplay,} from "@/components/tool-ui/stats-display";export const StatsDisplayTool = makeAssistantTool<SerializableStatsDisplay>({  toolName: "showStats",  description: "Display key metrics in a grid",  parameters: SerializableStatsDisplaySchema,  render: ({ args, result, addResult, toolCallId }) => {    if (!args?.stats?.length) return null;    const data = parseSerializableStatsDisplay({      ...args,      id: (args as any)?.id ?? `stats-${toolCallId}`,    });    return (      <StatsDisplayErrorBoundary>        <StatsDisplay {...data} />      </StatsDisplayErrorBoundary>    );  },});

Props

Prop

Type

StatItem Schema

Prop

Type

StatFormat Variants

Prop

Type

StatDiff Schema

Prop

Type

StatSparkline Schema

Prop

Type

Accessibility

All values are rendered as text, accessible to screen readers
Sparklines are decorative SVG with appropriate hiding from assistive tech

Social Posts Terminal

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 }, }, ]} /> );}

Features

Auto-responsive grid

CSS grid with auto-fit adapts to container width

Inline sparklines

Pure SVG trend visualization without external dependencies

Delta indicators

Semantic colors with upIsPositive for metrics where down is good

Format options

Currency, percent, number, and text with locale support

Single-stat hero mode

Pass a single stat for a larger, centered presentation

Source and Install

This component requires the following shadcn/ui components:

pnpm dlx shadcn@latest add card

action-buttons.tsx

schema.ts

index.ts

...

stats-display.tsx

sparkline.tsx

schema.ts

index.tsx

error-boundary.tsx

Usage

"use client";import { makeAssistantTool } from "@assistant-ui/react";import {  StatsDisplay,  StatsDisplayErrorBoundary,  parseSerializableStatsDisplay,  SerializableStatsDisplaySchema,  type SerializableStatsDisplay,} from "@/components/tool-ui/stats-display";export const StatsDisplayTool = makeAssistantTool<SerializableStatsDisplay>({  toolName: "showStats",  description: "Display key metrics in a grid",  parameters: SerializableStatsDisplaySchema,  render: ({ args, result, addResult, toolCallId }) => {    if (!args?.stats?.length) return null;    const data = parseSerializableStatsDisplay({      ...args,      id: (args as any)?.id ?? `stats-${toolCallId}`,    });    return (      <StatsDisplayErrorBoundary>        <StatsDisplay {...data} />      </StatsDisplayErrorBoundary>    );  },});