# Usage billing

A usage based billing dashboard with a projected spend line, meters against limits, alerts, and an upgrade that morphs into a confirm sheet.

- ID: `usage-billing`
- Import: `animui/usage-billing`
- Category: block
- Runtime exports: `UsageBilling`
- Declaration: `types/pro/usage-billing.d.ts`
- Type provenance: reconstructed-from-docs-and-runtime
- Related: billing-overview, usage-forecast, usage-pricing, plan-comparison, usage-meter

```tsx
import { UsageBilling } from 'animui/usage-billing';
```

This import example is not a complete render recipe: read the declaration below and its local references for required props, data, callbacks and provider context. Use `animui info usage-billing` to resolve the local declaration graph. Global setup is in `llms.txt`.

```ts
/** Reconstructed from saved Arc documentation and runtime binding evidence; original TypeScript source was unavailable. */
import type { ComponentType, ReactNode, CSSProperties, Ref, ButtonHTMLAttributes, HTMLAttributes, ReactElement } from 'react';

export interface UsageBillingProps {
  period?: string | number | boolean | ReactNode;
  daily?: string | number | boolean | ReactNode;
  budget?: string | number | boolean | ReactNode;
  meters?: string | number | boolean | ReactNode;
  plan?: string | number | boolean | ReactNode;
  upgrade?: string | number | boolean | ReactNode;
  defaultAlerts?: string | number | boolean | ReactNode;
  onAlertsChange?: () => void;
  invoices?: string | number | boolean | ReactNode;
  payment?: string | number | boolean | ReactNode;
  onUpgrade?: () => void;
  onDownloadInvoice?: () => void;
  currency?: string | number | boolean | ReactNode;
  className?: string;
}

export declare const UsageBilling: ComponentType<UsageBillingProps>;

export default UsageBilling;
```