Usage & Overage
Metered usage against the plan allowance: what is used, a hatched projection to the end of the period, the date the allowance runs out at this rate, and the overage it will cost.
The decision inside it
The meter goes past the limit
A bar that clamps at 100% hides the only number that matters in the week it matters. The scale is whichever is larger — the allowance or where this ends — so an overage is drawn as an overage.
Installation
How you get it
One command. The CLI writes the file into components/ui/ and installs what it needs.
npx shadcn@latest add https://layropro.com/r/usage-meterAPI
“Copy prompt” above puts a full brief on your clipboard — install command, dependencies, props, and the mistakes an assistant usually makes with this component.
Props
Read from the component’s own TypeScript interface when the site is built, so this table cannot drift from the file you install.
| Prop | Type | Notes |
|---|---|---|
unitrequired | string | What is being counted, plural: "API calls", "build minutes", "GB stored". |
includedrequired | number | — |
usedrequired | number | — |
dayrequired | number | Where today is in the period, for the run rate. |
daysInPeriodrequired | number | — |
periodLabel | string | Display strings. The component formats no dates. |
periodEndrequired | string | — |
crossesOn | string | The day the allowance runs out at the current rate, if it will — computed by the buyer's app, which owns the calendar. Drawn on the meter. |
overage | { per: number; price: Cents } | The overage rate: `{ per: 1000, price: 20 }` is $0.20 per 1,000. |
currency | string | — |
locale | string | — |
title | string | — |
action | { label: string; onClick: () => void } | Optional quiet action, e.g. "Compare plans". |
Dependencies
npm packages
clsxframer-motionlucide-reacttailwind-mergeLayro foundations, installed alongside it
layro-themeLifetime access
Every component, and everything we ship next.
- All 65 components, source included
- The template, and everything released after you buy
- shadcn CLI or download — React 18/19, Tailwind v4
- One payment. No subscription.
More in Billing
Subscription Status
PaidSix states, each with the date it depends on — and cancelled is not expired.
Included with lifetime access
Plan Picker
FreeThe exact charge printed under the button: prorated today, then the renewal.
Invoice History
FreeThe next invoice as a dashed estimate above the record, and notes for odd amounts.