# Usage meter

Show what fills an allowance and how close it is to the limit.

- ID: `usage-meter`
- Import: `animui/usage-meter`
- Category: Feedback
- Runtime exports: `UsageMeter`, `default`
- Declaration: `types/free/components/usage-meter.d.ts`
- Type provenance: emitted-original-typescript
- Related: progress, bar-chart, gauge

```tsx
import { UsageMeter } from 'animui/usage-meter';
```

This import example is not a complete render recipe: read the declaration below and its local references for required props, data, callbacks and provider context. Use `animui info usage-meter` to resolve the local declaration graph. Global setup is in `llms.txt`.

```ts
export { UsageMeter, default } from '../registry/components/usage-meter/usage-meter.js';
export type { UsageMeterProps, UsageMeterSegment } from '../registry/components/usage-meter/usage-meter.js';
```