Skip to content

Settings & Usage

Usage Summary

Tokens and cost over time, split by model, against a monthly budget.

2 variantsMIT

Preview

Usage

Last 7 days · 0 tokens

$0.00

Down100% vs previous
  • Claude Opus 5.50$0.00
  • Claude Sonnet 5.50$0.00
  • Claude Haiku 5.50$0.00

Weekly budget

$0.00 / $160.00

Installation

Copies the component into components/ui and installs its dependencies and theme tokens.

pnpm dlx shadcn@latest add https://tuffui.com/r/usage-summary.json

Usage

Pass your own data and wire the callbacks to your agent runtime.

import { UsageSummary } from "@/components/ui/usage-summary";

export function Billing({ report }: { report: UsageReport }) {
  return (
    <UsageSummary
      data={{
        models: [
          { id: "opus", name: "Claude Opus 5.5" },
          { id: "sonnet", name: "Claude Sonnet 5.5" },
        ],
        // One entry per day: { date: "2026-11-03", byModel: { opus: { tokens, cost } } }
        days: report.days,
        previousCost: report.previousPeriodCost,
        budget: { limit: 500, label: "Monthly budget" },
      }}
      currency="USD"
      onSelectDay={(day) => router.push(`/usage/${day.date}`)}
    />
  );
}

Props

PropTypeDefaultDescription
data*{ days: UsageDay[]; models: UsageModel[]; previousCost?: number; budget?: { limit: number; label?: string } }—One entry per day with tokens and cost per model. previousCost adds a delta pill; budget adds a budget bar.
currencystring"USD"ISO 4217 code used to format costs.
warnAtnumber0.8Share of the budget past which the budget bar turns into a warning.
onSelectDay(day: UsageDay) => void—Called when a bar is clicked or activated with Enter / Space.
titlestring"Usage"Heading and accessible name of the card.
classNamestring—Extra classes for the root element.
type UsageModel = {
  id: string;
  name: string;
  color?: string; // any CSS color; defaults to the built-in palette
};

type UsageDay = {
  date: string; // ISO date, e.g. "2026-11-03"
  byModel: Record<string, { tokens: number; cost: number }>;
};