AI Components / Usage Meter
Usage Meter
Quota / rate-limit ring meter with step thresholds (75% warning, 90% danger), animated count-up, sub-24h relative countdown, threshold-crossing aria-live announcements, pulsing glow at danger tier, and three sizes (compact 24px chip → default 96px → large 128px hero). Built from cg-card + cg-text + cg-button primitives.
ai-collabv0.5.0
Playground
Examples
Healthy (under 75%)
<ai-usage-meter used="4200" limit="10000" label="API Requests" unit="requests"></ai-usage-meter>Warning (≥75%) with live countdown
<ai-usage-meter used="8200" limit="10000" label="API Requests" unit="requests" reset-date="2026-07-07T04:16:13.238Z"></ai-usage-meter>Danger (≥90%) — pulsing ring
<ai-usage-meter used="9650" limit="10000" label="API Requests" unit="requests" reset-date="2026-07-08T03:04:13.238Z"></ai-usage-meter>Large hero (billing page)
<ai-usage-meter size="lg" used="14200" limit="20000" label="Monthly tokens" unit="tokens" reset-date="2026-07-19T01:04:13.238Z"></ai-usage-meter>Compact chip (nav-bar)
<cg-stack direction="row" gap="md" align="center"><ai-usage-meter size="compact" used="6700" limit="10000"></ai-usage-meter><cg-text size="sm" color="muted">tokens used</cg-text></cg-stack>Import
import { AiUsageMeter } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/ai-usage-meter';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
used | number | 0 | Current usage count |
limit | number | 100 | Maximum quota |
label | string | "Usage" | Metric label |
unit | string | "requests" | Unit text |
reset-date | string | "" | ISO date or human string for quota reset; sub-24h auto-formats as a live "Resets in 3h 15m" countdown |
size | "default" | "compact" | "lg" | "default" | compact = 24px chip for nav-bars; lg = 128px hero ring for billing pages |
Events
| Event | Detail | Description |
|---|---|---|
ai-usage-upgrade | {} | Upgrade CTA clicked (visible when usage ≥ 80%) |
ai-usage-threshold | { tier: "normal" | "warning" | "danger" } | Crossed the 75% or 90% threshold |