A metric against its limit, with an 8 px track and a plain hint. State comes from the numbers.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/usage-meterPlayground
API calls
42,180 of 100,000
Steady pace, well within your plan.
States
API calls
42,180 of 100,000
Steady pace, well within your plan.
API calls86% used
86,400 of 100,000
At this pace you reach the limit in 3 days.
API callsOver limit
112,040 of 100,000
Overage billed at $0.002 per call, about $24 so far.
State
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/usage-meter
States
State comes from the numbers: Warning from 80%, Over limit past 100%.
API calls
42,180 of 100,000
Steady pace, well within your plan.
API calls86% used
86,400 of 100,000
At this pace you reach the limit in 3 days.
API callsOver limit
112,040 of 100,000
Overage billed at $0.002 per call, about $24 so far.
Motion
Accessibility
- Uses the meter role with a name and value.
- Warning and Over limit repeat as a Badge and in the hint.
Motion
- The card fades in and rises 8 px over 400 ms.
- The fill tweens over 400 ms and the number with it.
- Warning starts at 80%. Over limit fills the track in danger.
- With reduced motion, values swap at once.
Responsive behavior
- 420 wide on Web and 358 on Mobile.
Performance
- The fill moves on a transform over 400 ms, so a new value never runs layout.
- The number tweens by writing text directly, so React does not render per frame.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import UsageMeter from @/components/fetaui/usage-meter. It composes Meter, Tag and Tween from data-kit.
- State comes from used over limit: Warning from 80%, Over limit past 100%. There is no state prop.
- meta shows only while Normal, because the badge takes its place. hint is your text, so make it say what happens next.
- Use unit for a word like GB and format for currency or short numbers. Pass your own icon to replace the default.
Related
Usage OverviewProBlockSpend against budget with a projection, the plan, and metered usage with warning and danger states.Billing OverviewProBlockBilling settings: current plan, card on file, usage meters and invoices.ProgressComponentShows how far a task has come, with states for done, paused, failed and unknown length, plus nine recipes.Spend AlertsComponentBudget alert settings: a budget, a threshold, channels, a hard stop and a live preview of the alert.