Cost display

What a message or an agent run cost, in tabular figures, with the breakdown one click away: input, cached input, output and tool calls, each with tokens and cost.

Markdown

On this page

The cost in a message meta row, with the token breakdown in a popover.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/cost-display.json

Usage

tsx

import { CostDisplay } from "@/components/ui/chatcn/cost-display"

<CostDisplay
  breakdown={[
    { key: "input", label: "Input", tokens: 8420, cost: 0.0253 },
    { key: "output", label: "Output", tokens: 1312, cost: 0.0197 },
  ]}
  model="claude-sonnet-4-5"
  pricing="$3.00 / M input, $15.00 / M output."
/>

Small amounts keep two significant figures ($0.042, $0.0031) so per-message costs stay comparable; dust reads <$0.0001. formatCost is exported.

Examples

Run cost

An agent run's cost updating in place while it works, then settling.

Props

Prop	Type	Notes
`cost`	`number`	Defaults to the sum of `breakdown`
`breakdown`	`CostLine[]`	`{ key, label, cost, tokens?, count? }`
`variant`	`"message" \| "run"`	Inline figure or summary block
`currency`, `locale`	`string`	Default USD
`model`, `pricing`	`ReactNode`	Popover heading and footnote
`live`	`boolean`	Run still going: reads Cost so far
`stats`	`{ label, value }[]`	Steps, duration, tokens beside the run total

Accessibility

The trigger's name starts with the visible amount, then says what it is. The breakdown is a real table with a total row.
Breakdown segments take the chart palette and each row carries its label, so nothing depends on telling hues apart.

Motion

Numbers update in place with tabular figures. They never count up.
The popover grows from the figure, 180 ms.