## Usage Meters (S—033)

Billing-period usage bars that turn amber at 80% and red over the limit, with an upgrade prompt only when it matters.

- URL: https://sundaeui.dev/components/usage-meters
- Category: Cards & data visualization · Art direction: Understated
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, Tailwind CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/usage-meters.json`
- Tags: dashboard, tailwind, meter, saas, usage, progress, react, billing

Usage that’s honest without being alarming. Each meter shows used out of limit, with a faint tick at 80%. Bars turn amber past the tick and red over the limit, where a line states the exact overage and when it is billed.
The upgrade prompt only appears once something is close to a limit, so it reads as help rather than an ad. The header says when the period resets. Numbers format compactly past 10,000 or with your own formatter, such as GB with one decimal.
Use it on billing and account pages and in usage-based pricing dashboards.

### Usage

```tsx
import { UsageMeters } from '@/components/sundae/usage-meters'

<UsageMeters
  planName="Team"
  resetsAt={period.end}
  onUpgrade={() => router.push('/billing/upgrade')}
  meters={[{ id: 'calls', label: 'API requests', used: 82400, limit: 100000 }]}
/>
```

### Props

- `meters` (`Meter[]`, required): { id, label, used, limit, unit?, format? }.
- `resetsAt` (`string (ISO)`): Shows days until reset.
- `planName` (`string`): Shown in the header.
- `onUpgrade` (`() => void`): Enables the upgrade prompt at 80% or more.

### Accessibility

- Each bar is a role="meter" labelled by its row, with a percentage value text.
- Colour is never the only signal: overage is also written out.