/
1.1k
Sponsor

Token Usage

Compact token counter showing prompt and completion usage with optional cost estimate; also exports ContextMeter for visualising context window fill

Terminal

Installation

$ pnpm dlx shadcn@latest add @termcn/ink/token-usage

Usage

import { TokenUsage, ContextMeter } from "@/components/ui/token-usage";
<TokenUsage prompt={2450} completion={890} model="gpt-4o" showCost />

API Reference

TokenUsage

PropTypeDefault
promptnumberrequired
completionnumberrequired
modelstring-
showCostbooleanfalse

ContextMeter

PropTypeDefault
usednumberrequired
limitnumberrequired
labelstring-
showPercentbooleantrue
warnAtnumber75
criticalAtnumber90
widthnumber20

Notes

Accessibility

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

  • Screen reader: Ink labels and semantic state expose the component without relying on visual styling alone.