Usage card with a segmented meter coloured by resource, a hatched projection and animated totals; the monthly budget slider rescales every segment live.
aiusagebillingbudgetmeterquotacostslider
Segmented meter
segmented-meter.tsxSegments fill by resource with a staggered spring; hover a resource to isolate its share, drag the budget to rescale.
$npx shadcn@latest add @geturui-pro/usage-budget-segmented-meter
| Prop | Type | Default | Description |
|---|---|---|---|
resources | UsageResource[] | DEFAULT_RESOURCES | { id, name, usage, cost, tone? } in meter order. |
budget / defaultBudget | number | 250 | Controlled or initial monthly budget in dollars. |
onBudgetChange | (budget: number) => void | — | Called as the slider moves. |
minBudget / maxBudget / step | number | 50 / 1000 / 10 | Slider range. |
projected | number | 238 | Forecast spend, drawn as hatched segments. |
alertAt | number | 0.8 | Fraction of budget that switches to the warning state. |
segments | number | 40 | Number of segments. |
periodLabel | string | — | Billing period line under the title. |
Install the whole set
Installs every usage meter variant at once. Each section above has its own command for a single variant.
Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.
$npx shadcn@latest add @geturui-pro/usage-budget
Accessibility
- The segmented bar is a role="meter" with a spoken value such as “$184.20 of $250.00, 74 percent”.
- The budget slider is a native range input with a dollar aria-valuetext; arrows and Page keys adjust it.
- Status is always an icon plus words (On track, 82% of budget used, Over by $12.00), never colour alone.