Feedback

Usage Meter

Server Component

Linear or circular quota / billing usage indicator with severity tones.

Import

tsx

import { UsageMeter, UsageMeterLinear, UsageMeterCircular } from "@cronus-ui/ui";

bash

npx cronus-ui add usage-meter

Examples

Linear

A horizontal quota bar with a label and a value / max readout. The `auto` tone shades the fill from primary to warning to error as usage climbs.

Tokens186,400 / 250,000 tokens75%

Seats18 / 2090%

Storage48 / 50 GB96%

tsx

<div className="flex w-full max-w-sm flex-col gap-6">
  <UsageMeter label="Tokens" value={186_400} max={250_000} unit="tokens" />
  <UsageMeter label="Seats" value={18} max={20} />
  <UsageMeter label="Storage" value={48} max={50} unit="GB" />
</div>

Circular

An SVG ring for compact, at-a-glance quota — here three API-request budgets.

62%

API requests

6,200 / 10,000

86%

Bandwidth

172 / 200 GB

95%

Builds

95 / 100

tsx

<div className="flex flex-wrap items-center gap-8">
  <UsageMeterCircular label="API requests" value={6_200} max={10_000} />
  <UsageMeterCircular label="Bandwidth" value={172} max={200} unit="GB" tone="warning" />
  <UsageMeterCircular label="Builds" value={95} max={100} />
</div>

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component UsageMeterDefault layout:inline style:usage-meter {
  value:40
  aria-label:"Token usage"
  label "Tokens"
}

page "/audit/usage-meter/default" type:custom {
  use UsageMeterDefault
}

API Reference

Generated from the component's exported types.

UsageMeterProps

Extends Omit<HTMLAttributes<HTMLDivElement>, "children">

Prop	Type	Default	Description
`value`*	`number`	—	Current usage.
`max`*	`number`	—	The quota / limit the usage is measured against.
`label`	`ReactNode`	—	Optional label shown beside (linear) or below (circular) the meter.
`unit`	`string`	—	Unit suffix appended to the value readout, e.g. "tokens".
`variant`	`UsageMeterVariant`	`"linear"`	Layout: a horizontal bar or an SVG ring.
`tone`	`UsageMeterTone`	`"auto"`	Color. `auto` derives severity from the usage ratio; others are explicit.
`formatValue`	`(value: number, max: number) => string`	—	Override the `value / max` readout.
`showValue`	`boolean`	`true`	Whether to render the textual value/percentage readout.
`size`	`number`	`96`	Diameter of the ring in px (circular variant only).
`className`	`string`	—	Additional class names merged onto the root.
`id`	`string`	—	DOM id of the root element.

UsageMeterLinearProps

Extends Omit<UsageMeterProps, "variant">

Prop	Type	Default	Description
`value`	`number`	—	Current usage.
`max`	`number`	—	Upper bound of the meter.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

UsageMeterCircularProps

Extends Omit<UsageMeterProps, "variant">

Prop	Type	Default	Description
`value`	`number`	—	Current usage.
`max`	`number`	—	Upper bound of the meter.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.