UsageMeterField

Displays a numeric usage value relative to an optional limit. Renders a progress bar whose color shifts at configurable thresholds (warning, critical).

Installation

pnpm dlx shadcn@latest add @shadmin/usage-meter-field

Usage

import { UsageMeterField } from '@/components/admin';
 
<UsageMeterField source="used" limitSource="limit" unit="GB" />
<UsageMeterField
  source="apiCalls"
  limitSource="apiQuota"
  thresholds={{ warning: 0.5, critical: 0.9 }}
/>
{/* No limit — bare value only */}
<UsageMeterField source="requestCount" unit="requests" />

Props

Prop	Required	Type	Default	Description
`source`	Required	`string`	-	Record field for the used value
`limitSource`	Optional	`string`	-	Sibling field for the limit value
`unit`	Optional	`string`	-	Display unit (e.g. "GB")
`thresholds`	Optional	`{ warning: number; critical: number }`	`{ warning: 0.8, critical: 1.0 }`	Ratio cutoffs for color state
`className`	Optional	`string`	-	CSS class on the wrapping `<span>`

States

ok (default styling) — ratio below warning.
warning (yellow bar) — ratio at/above warning.
critical (red bar) — ratio at/above critical.

The current state is exposed via data-state on the wrapping element for CSS / E2E test hooks.