# Usage Table
URL: /docs/components/usage-table

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

***

title: Usage Table
description: Per-model LLM usage with token counts, cache reads, and API cost.
------------------------------------------------------------------------------

<Tabs items={['Preview', 'Code']} className="bg-transparent border-none">
  <Tab value="Preview" className="border-none bg-transparent p-0 mt-3">
    <PreviewComponents registryName="usage-table">
      <UsageTableDemo />
    </PreviewComponents>
  </Tab>

  <Tab value="Code" className="mt-3">
    ```tsx title="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.0,
        },
        {
          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."
        />
      );
    }

    ```
  </Tab>
</Tabs>

## Installation

<Tabs items={['shadcn', 'billingSDK']} defaultValue="shadcn" className="bg-transparent border-none">
  <Tab value="shadcn" className="border-none bg-transparent p-0 mt-3">
    <Tabs items={['npx', 'pnpm', 'yarn', 'bun']} defaultValue="npx" groupId="installation-tabs">
      <Tab value="npx">
        ```bash
        npx shadcn@latest add @billingsdk/usage-table
        ```
      </Tab>

      <Tab value="pnpm">
        ```bash
        pnpm dlx shadcn@latest add @billingsdk/usage-table
        ```
      </Tab>

      <Tab value="yarn">
        ```bash
        yarn dlx shadcn@latest add @billingsdk/usage-table
        ```
      </Tab>

      <Tab value="bun">
        ```bash
        bunx shadcn@latest add @billingsdk/usage-table
        ```
      </Tab>
    </Tabs>
  </Tab>

  <Tab value="billingSDK" className="border-none bg-transparent p-0 mt-3">
    <Tabs items={['npx', 'pnpm', 'yarn', 'bun']} defaultValue="npx" groupId="billingsdk-cli-tabs">
      <Tab value="npx">
        ```bash
        npx @billingsdk/cli add usage-table
        ```
      </Tab>

      <Tab value="pnpm">
        ```bash
        pnpm dlx @billingsdk/cli add usage-table
        ```
      </Tab>

      <Tab value="yarn">
        ```bash
        yarn dlx @billingsdk/cli add usage-table
        ```
      </Tab>

      <Tab value="bun">
        ```bash
        bunx @billingsdk/cli add usage-table
        ```
      </Tab>
    </Tabs>
  </Tab>
</Tabs>

## Usage

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

```tsx
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
    }
];
```

```tsx
  <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

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

### Credits

* Created by [@vamsisai696](https://x.com/vamsisai696)