# Usage Dashboard
Source: https://ui.spencerwueste.com/docs/blocks/usage-dashboard/
Markdown: https://ui.spencerwueste.com/llm/blocks/usage-dashboard.md

> Stat tiles, spend charts, rate-limit meters, and a recent-requests table.

> Live preview: https://ui.spencerwueste.com/preview/usage-dashboard

## What's inside

- **Stat Tile** and **Sparkline** for requests, spend, tokens, and error rate.
- **Bar Chart** for spend by day and by model.
- **Usage Meter** for per-minute rate limits and the monthly budget.
- **Table** of recent requests.

## Installation

```bash
npx shadcn@latest add https://ui.spencerwueste.com/r/usage-dashboard.json
```

Manual install dependencies: `@heroicons-animated/react motion`

Registry JSON: https://ui.spencerwueste.com/r/usage-dashboard.json

The registry item pulls in every component it depends on.

## Usage

```tsx
import UsageDashboard from "@/components/blocks/usage-dashboard/usage-dashboard";

export default function Page() {
  return (
    <div className="h-dvh p-4">
      <UsageDashboard />
    </div>
  );
}
```

Give the parent a bounded height. The block fills it and scrolls internally.

## Going live

Replace the `daily`, `byModel`, and `recent` constants with data from your billing and logging APIs. The range toggle just picks a dataset, so wire it to a query parameter.