Resource Meter

Used against a cap: build minutes, storage, seats, rate limits. Unlike Progress it can exceed 100%, because a quota can be 130% used and hiding that is how a bill becomes a surprise.

src/components/ui/resource-meter.tsx

About

From the component's own source, where it was written.

A used-against-cap bar: build minutes, storage, seats, rate limits.

Not Progress, which reports how far along a task is. This reports consumption of a fixed budget, so it warns as it fills and can overflow past 100% — a task cannot be 130% done, but a quota can be 130% used, and hiding that by clamping is how a bill becomes a surprise.

Install

npx astralyx-ui add resource-meter

Usage

import { ResourceMeter } from '@/components/ui/resource-meter'

<ResourceMeter label="Build minutes" used={8420} cap={10000} />

Composer

Change the props and the source below follows.

Build minutes8,420 / 10,000(84%)
Props
tsx
<ResourceMeter
  label="Build minutes"
  used={8420}
  cap={10000}
  unit="number"
/>

Examples

Quotas

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

ResourceMeter

A used-against-cap bar: build minutes, storage, seats, rate limits.

Extends Omit<ComponentProps<'div'>, 'children'>.

PropTypeDefaultDescription
labelReactNoderequired—
usednumberrequiredThe bar clamps at full; the printed percentage does not, so an overage is stated rather than hidden.
capnumberrequiredThe bar clamps at full; the printed percentage does not, so an overage is stated rather than hidden.
unit'number' | 'bytes' | 'duration''number'How both numbers are written — routed through Fmt.
tonestring—Any CSS colour. Defaults to a ramp: blue, amber above 80%, red above 95% or over cap.
hintReactNode——
size'sm' | 'default''default'Bar and label scale.