# Billing and usage

> Billing cards for SaaS settings — usage meters with thresholds and projections, seats and spend with a priced seat stepper, and a credits balance with top-up packs — that fill, count and spring.

- Collection: Examples
- Tier: pro
- Docs: https://geturui.com/docs/billing-usage
- Install: `npx shadcn@latest add @geturui-pro/billing-usage`
- Dependencies: motion, lucide-react

## Variants

### Usage meters

Plan meters that fill with a spring, mark the alert threshold and hatched end-of-cycle projection, and turn to near-limit or over-limit with an icon and a word.

Install: `npx shadcn@latest add @geturui-pro/billing-usage-usage-meters`

```tsx
import { UsageMetersCard } from "@/components/examples/billing-usage/usage-meters";

export function Usage() {
  return (
    <UsageMetersCard
      meters={[
        { id: "api", label: "API requests", used: 42000, limit: 50000, projected: 51000 },
        { id: "storage", label: "Storage", used: 3.2, limit: 10, format: (n) => `${n} GB` },
      ]}
      onAlertsChange={saveAlerts}
    />
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| plan / cycle | `string` | — | Plan name and reset caption. |
| meters | `UsageMeter[]` | — | { id, label, used, limit, projected?, format?, overageNote? }. |
| warnAt | `number` | 0.8 | Fraction where a meter turns to warning. |
| defaultAlerts | `boolean` | true | Initial state of the email alert switch. |
| onAlertsChange / onManage | `function` | — | Switch and button handlers. |

### Seats and spend

A seat grid with pending invites, month-to-date spend against a budget pace line, and a seat stepper that prices the monthly and prorated change before the upgrade.

Install: `npx shadcn@latest add @geturui-pro/billing-usage-seats-spend`

```tsx
import { SeatsSpendCard } from "@/components/examples/billing-usage/seats-spend";

export function Seats() {
  return <SeatsSpendCard seatsTotal={10} seatsUsed={8} invites={1} monthlyBudget={400} dailySpend={spend} onAddSeats={(n) => addSeats(n)} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| plan / seatPrice | `string / number` | — | Plan name and price per seat a month. |
| seatsTotal / seatsUsed / invites | `number` | — | Seat counts for the grid. |
| members | `string[]` | — | Initials for the avatar stack. |
| dailySpend | `number[]` | — | Spend per day so far this month. |
| daysInMonth / monthlyBudget | `number` | — | Budget pace and projection inputs. |
| onAddSeats | `(count: number) => void` | — | Called with the stepper value. |

### Credits balance

Credits on a ring that springs to the new total after a purchase, runway in days from the burn rate, top-up packs as a radio group and an auto-recharge switch.

Install: `npx shadcn@latest add @geturui-pro/billing-usage-credits-balance`

```tsx
import { CreditsBalanceCard } from "@/components/examples/billing-usage/credits-balance";

export function Credits() {
  return <CreditsBalanceCard balance={4200} dailyBurn={600} onPurchase={(pack) => checkout(pack.id)} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| balance / capacity | `number` | — | Credits left and the ring's full value. |
| dailyBurn | `number` | 1860 | Average credits used per day. |
| lowDays | `number` | 10 | Runway below which the card warns. |
| packs | `CreditPack[]` | — | { id, credits, price, note? } top-up options. |
| onPurchase | `(pack: CreditPack) => void` | — | Called on buy; the card adds the credits optimistically. |

## Accessibility

- Meters use role="meter" with a value text that includes the status and projection; warning and over-limit states always show an icon and a word.
- Switches are buttons with role="switch", credit packs are a radio group with arrow-key selection, and the seat stepper announces its count.
- Counting numbers keep a static value for screen readers, and reduced motion fills meters and rings without animation.

## Source

Pro item — send `Authorization: Bearer <registry token>` to include the source.