# Usage forecast

> Actual and projected usage against a budget, with the day you'll cross it.

Block · Pro · https://lodeui.com/blocks/usage-forecast

## When to use

- Usage-billed products: cloud, AI tokens, API calls.

## When not to use

- Flat-priced plans.

## Installation

```bash
npx shadcn@latest add @lode/usage-forecast
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { UsageForecast } from "@/components/blocks/usage-forecast";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <UsageForecast />
    </main>
  );
}
```

Built from: Checkbox, Number ticker, Tabs

## API reference

### UsageForecast

Actual and projected spend with a confidence band, the day you'll cross the budget, and alert thresholds. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach tabs and threshold checkboxes |
| ← / → | Switch tabs |
| Space | Toggle a threshold |

## Accessibility

- The chart has role="img" with a text summary of the projection.
- Threshold checkboxes are labelled with their amounts.

## Motion

- Projection and band fade in after the actual line.

## Responsive behavior

- Thresholds stack under the chart on phones.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.
- The projection is a simple linear fit computed once per render.

## Notes for AI

- Replace the linear projection with your own model if you have one.

## Related

- [Billing settings](https://lodeui.com/blocks/billing-settings) — Plan, payment method, usage meters, invoices and a prorated plan change.
- [Progress](https://lodeui.com/components/progress) — Linear bar, ring and segmented meter, all spring-driven.
- [Tabs](https://lodeui.com/components/tabs) — Underline or pill tabs with an indicator that glides between them.