Usage Meter
Shows how much of a quota has been used.
@paneui/theme@base-ui/react
Installation
pnpm dlx shadcn@latest add @paneui/usage-meterUsage
Examples
Accessibility
Renders a meter (role="meter") labelled by label, with value text like "8,420 of 10,000 runs".
API Reference
Built on the Meter primitive. Only the props this library adds or changes are listed; everything else passes through.
UsageMeter
Also accepts every prop of Meter.Root.
- label*
- ReactNode
- What is being measured.
- value*
- number
- Amount used.
- max= 100
- number
- The quota.
- unit
- string
- Suffix for the numbers.
- description
- ReactNode
- Line under the bar.
- warnAt= 0.75
- number
- Share where the bar turns warning.
- dangerAt= 0.9
- number
- Share where it turns destructive.
- readout= "value"
- "value" | "percent" | "none"
- What the right side shows.
- formatOptions
- Intl.NumberFormatOptions
- Number format for the readout.
| Prop | Type | Default | Description |
|---|---|---|---|
| label* | ReactNode | — | What is being measured. |
| value* | number | — | Amount used. |
| max | number | 100 | The quota. |
| unit | string | — | Suffix for the numbers. |
| description | ReactNode | — | Line under the bar. |
| warnAt | number | 0.75 | Share where the bar turns warning. |
| dangerAt | number | 0.9 | Share where it turns destructive. |
| readout | "value" | "percent" | "none" | "value" | What the right side shows. |
| formatOptions | Intl.NumberFormatOptions | — | Number format for the readout. |
- data-level
ok,warnordanger.
| Data attribute | Description |
|---|---|
| data-level | ok, warn or danger. |