# Usage Meter

A metric against its limit, with an 8 px track and a plain hint. State comes from the numbers.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/usage-meter
```

## Usage

```tsx
import { UsageMeter } from '@/components/fetaui/usage-meter'

export function Example(props) {
  return <UsageMeter metric="API calls" used={42180} limit={100000} hint="Steady pace." />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| metric | string | required |
| used, limit | number | required |
| unit | string |  |
| hint, meta, icon | ReactNode |  |
| format | (value) => string | grouped number |
| animated | boolean | true |

## When to use

- For one metered resource.

## When not to use

- For task progress: use Progress.

## Accessibility

- Uses the meter role with a name and value.
- Warning and Over limit repeat as a Badge and in the hint.

## Motion

- The card fades in and rises 8 px over 400 ms.
- The fill tweens over 400 ms and the number with it.
- Warning starts at 80%. Over limit fills the track in danger.
- With reduced motion, values swap at once.