TokenUsage

Visual token and cost meter showing input tokens, output tokens, and total usage against a maximum budget. The bar color shifts from blue to amber to red as usage increases.

TokenUsage — Usage Levels

Low usage

2.0k / 8.2k tokens

Input: 1.2kOutput: 800

Medium usage (with cost)

20.5k / 32.0k tokens$0.0312

Input: 12.0kOutput: 8.5k

High usage (with cost)

127.0k / 128.0k tokens$0.1845

Input: 85.0kOutput: 42.0k

Import

tsx

import { TokenUsage } from "@arc-lo/ui";

Basic usage

tsx

<TokenUsage
  inputTokens={4200}
  outputTokens={1800}
  maxTokens={8192}
/>

{/* With cost */}
<TokenUsage
  inputTokens={12000}
  outputTokens={8500}
  maxTokens={32000}
  cost={0.0312}
/>

Props

Prop	Type	Default	Description
`inputTokens`	`number`	—	Number of input tokens used (required)
`outputTokens`	`number`	—	Number of output tokens used (required)
`maxTokens`	`number`	—	Maximum token budget (required)
`cost`	`number`	—	Cost in dollars