CostTracker

Token and cost usage display.

import { CostTracker } from '@ybouhjira/hyperkit';

#Playground

Edit the code — the preview recompiles and re-renders as you type.

Loading preview…

<CostTracker cost={0.0234} inputTokens={1234} outputTokens={567} compact />

<CostTracker cost={0.0012} inputTokens={234} outputTokens={156} />

Prop	Type	Default	Description
`cost` *	`number`	—	Dollar cost of the request
`inputTokens` *	`number`	—	Number of input tokens
`outputTokens` *	`number`	—	Number of output tokens
`compact`	`boolean`	—	Compact mode for narrow headers
`class`	`string`	—	Additional CSS classes

* required prop.

This component reads the following CSS custom properties. Override them globally or per-instance to restyle it — see the CSS Variables guide.