# Usage Meter
Source: https://ui.spencerwueste.com/docs/components/usage-meter
Markdown: https://ui.spencerwueste.com/llm/components/usage-meter.md

> Labelled progress meter for context windows, rate limits, and budgets, with warning and danger thresholds.

> Live preview: https://ui.spencerwueste.com/docs/components/usage-meter (demo source: `src/demos/usage-meter-demo.tsx`)

## Installation

```bash
npx shadcn@latest add https://ui.spencerwueste.com/r/usage-meter.json
```

Registry JSON: https://ui.spencerwueste.com/r/usage-meter.json

## Usage

```tsx
import { UsageMeter, UsageMeterGroup } from "@/components/pandacoderz-ui/usage-meter";
```

```tsx
<UsageMeter label="Context window" value={41_200} max={200_000} showPercent />
<UsageMeter label="Budget" value={97.4} max={100} format={(v, m) => `$${v} / $${m}`} />
```

The bar turns amber at `warnAt` percent and red at `dangerAt` percent.

## API Reference

| Prop | Type | Description |
| --- | --- | --- |
| `value` / `max` | `number` | Current and maximum. |
| `label` | `ReactNode` | Left-hand label. |
| `format` | `(value, max) => string` | Right-hand text. Defaults to compact numbers. |
| `showPercent` | `boolean` | Appends a percentage. |
| `warnAt` / `dangerAt` | `number` | Thresholds in percent. Defaults `80` and `95`. |
| `size` | `"sm" \| "md"` | Bar thickness. |