Usage Table

Usage Summary

Per-model LLM usage with token counts, cache reads, and API cost.

Model usage summary with token counts and costs
MODEL	INPUT (W/ CACHE WRITE)	INPUT (W/O CACHE WRITE)	CACHE READ	OUTPUT	TOTAL TOKENS	API COST	COST TO YOU
gpt-5	0	518,131	1,646,080	103,271	2,267,482	$0.00	$0.00
claude-3.5-sonnet	176,177	28,413	434,612	8,326	647,528	$0.00	$1.00
gemini-2.0-flash-exp	176,100	28,432	434,612	8,326	647,528	$1.00	$0.00
gemini-2.5-pro	176,177	28,413	434,612	7,000	647,528	$1.00	$0.00
claude-4-sonnet	68,415	902	864,450	12,769	946,536	$0.71	$0.71
claude-3.7-sonnet	68,415	902	864,450	12,769	946,536	$0.71	$0.00
auto	84,551	0	284,876	9,458	378,885	$0.23	$0.00
sonic	0	149,484	4,354,855	23,569	4,527,908	$0.00	$2.00
Total	749,835	754,677	9,318,547	185,488	11,009,931	$3.65	$3.71

src/components/usage-table-demo.tsx

import { UsageTable, type UsageItem } from '@/registry/billingsdk/usage-table';

export default function UsageTableDemo() {
  const usageHistory: UsageItem[] = [
    {
      model: 'gpt-5',
      inputWithCache: 0,
      inputWithoutCache: 518131,
      cacheRead: 1646080,
      output: 103271,
      totalTokens: 2267482,
    },
    {
      model: 'claude-3.5-sonnet',
      inputWithCache: 176177,
      inputWithoutCache: 28413,
      cacheRead: 434612,
      output: 8326,
      totalTokens: 647528,
      costToYou: 1.00
    },
    {
      model: 'gemini-2.0-flash-exp',
      inputWithCache: 176100,
      inputWithoutCache: 28432,
      cacheRead: 434612,
      output: 8326,
      totalTokens: 647528,
      apiCost: 1,
      costToYou: 0
    },
    {
      model: 'gemini-2.5-pro',
      inputWithCache: 176177,
      inputWithoutCache: 28413,
      cacheRead: 434612,
      output: 7000,
      totalTokens: 647528,
      apiCost: 1,
      costToYou: 0
    },
    {
      model: 'claude-4-sonnet',
      inputWithCache: 68415,
      inputWithoutCache: 902,
      cacheRead: 864450,
      output: 12769,
      totalTokens: 946536,
      apiCost: 0.71,
      costToYou: 0.71
    },
    {
      model: 'claude-3.7-sonnet',
      inputWithCache: 68415,
      inputWithoutCache: 902,
      cacheRead: 864450,
      output: 12769,
      totalTokens: 946536,
      apiCost: 0.71,
    },
    {
      model: 'auto',
      inputWithCache: 84551,
      inputWithoutCache: 0,
      cacheRead: 284876,
      output: 9458,
      totalTokens: 378885,
      apiCost: 0.23,
      costToYou: 0
    },
    {
      model: 'sonic',
      inputWithCache: 0,
      inputWithoutCache: 149484,
      cacheRead: 4354855,
      output: 23569,
      totalTokens: 4527908,
      costToYou: 2
    }
  ];


  return (
      <UsageTable 
        title="Usage Summary"
        usageHistory={usageHistory}
        showTotal={true}
        description="Per-model LLM usage with token counts, cache reads, and API cost."
      />
  );
}

Installation

npx shadcn@latest add @billingsdk/usage-table

pnpm dlx shadcn@latest add @billingsdk/usage-table

npx shadcn@latest add @billingsdk/usage-table

npx @billingsdk/cli add usage-table

pnpm dlx @billingsdk/cli add usage-table

npx @billingsdk/cli add usage-table

Usage

import { UsageTable, type UsageItem } from "@/components/billingsdk/usage-table";

const usageHistory: UsageItem[] = [
    {
      model: 'gpt-5',
      inputWithCache: 0,
      inputWithoutCache: 518131,
      cacheRead: 1646080,
      output: 103271,
      totalTokens: 2267482,
    },
    {
      model: 'claude-3.5-sonnet',
      inputWithCache: 176177,
      inputWithoutCache: 28413,
      cacheRead: 434612,
      output: 8326,
      totalTokens: 647528,
      costToYou: 1.00
    },
    {
      model: 'gemini-2.0-flash-exp',
      inputWithCache: 176100,
      inputWithoutCache: 28432,
      cacheRead: 434612,
      output: 8326,
      totalTokens: 647528,
      apiCost: 1,
      costToYou: 0
    },
    {
      model: 'gemini-2.5-pro',
      inputWithCache: 176177,
      inputWithoutCache: 28413,
      cacheRead: 434612,
      output: 7000,
      totalTokens: 647528,
      apiCost: 1,
      costToYou: 0
    },
    {
      model: 'claude-4-sonnet',
      inputWithCache: 68415,
      inputWithoutCache: 902,
      cacheRead: 864450,
      output: 12769,
      totalTokens: 946536,
      apiCost: 0.71,
      costToYou: 0.71
    },
    {
      model: 'claude-3.7-sonnet',
      inputWithCache: 68415,
      inputWithoutCache: 902,
      cacheRead: 864450,
      output: 12769,
      totalTokens: 946536,
      apiCost: 0.71,
    },
    {
      model: 'auto',
      inputWithCache: 84551,
      inputWithoutCache: 0,
      cacheRead: 284876,
      output: 9458,
      totalTokens: 378885,
      apiCost: 0.23,
      costToYou: 0
    },
    {
      model: 'sonic',
      inputWithCache: 0,
      inputWithoutCache: 149484,
      cacheRead: 4354855,
      output: 23569,
      totalTokens: 4527908,
      costToYou: 2
    }
];

  <UsageTable 
    title="Usage Summary"
    usageHistory={usageHistory}
    showTotal={true}
    description="Per-model LLM usage with token counts, cache reads, and API cost."
  />

Props

Prop	Type	Required	Description
`usageHistory`	`UsageItem[]`	✅	List of usage to display
`className`	`string`	❌	Additional CSS classes for styling
`title`	`string`	❌	Optional heading text
`description`	`string`	❌	Optional description text
`showTotal`	`boolean`	❌	Show total row (default: true)

UsageItem

interface UsageItem {
  model: string
  inputWithCache: number
  inputWithoutCache: number
  cacheRead: number
  output: number
  totalTokens: number
  apiCost?: number
  costToYou?: number
}

Credits

Created by @vamsisai696

Usage TableCopy Page

Installation

Usage

Props

UsageItem

Credits