# Invoice History
URL: /docs/components/invoice-history

Read-only table for displaying past invoices and receipts with status and download actions.

***

title: Invoice History
description: Read-only table for displaying past invoices and receipts with status and download actions.
--------------------------------------------------------------------------------------------------------

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

  <Tab value="Code" className="mt-3">
    ```tsx title="src/components/invoice-history-demo.tsx"
    "use client";

    import {
      InvoiceHistory,
      type InvoiceItem,
    } from "@/components/billingsdk/invoice-history";

    export default function InvoiceHistoryDemo() {
      const invoices: InvoiceItem[] = [
        {
          id: "inv_001",
          date: "2025-06-01",
          amount: "$49.00",
          status: "paid",
          description: "Pro plan — May 2025",
          invoiceUrl: "https://example.com/invoices/inv_001.pdf",
        },
        {
          id: "inv_002",
          date: "2025-05-01",
          amount: "$49.00",
          status: "paid",
          description: "Pro plan — April 2025",
          invoiceUrl: "https://example.com/invoices/inv_002.pdf",
        },
        {
          id: "inv_003",
          date: "2025-04-01",
          amount: "$49.00",
          status: "refunded",
          description: "Pro plan — March 2025",
        },
        {
          id: "inv_004",
          date: "2025-03-01",
          amount: "$49.00",
          status: "open",
          description: "Pro plan — February 2025",
        },
      ];

      return (
        <div className="w-full">
          <InvoiceHistory invoices={invoices} />
        </div>
      );
    }

    ```
  </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/invoice-history
        ```
      </Tab>

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

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

      <Tab value="bun">
        ```bash
        bunx shadcn@latest add @billingsdk/invoice-history
        ```
      </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 invoice-history
        ```
      </Tab>

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

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

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

## Usage

```tsx
import { InvoiceHistory, type InvoiceItem } from "@/components/billingsdk/invoice-history";
```

```tsx
const invoices: InvoiceItem[] = [
  { id: 'inv_001', date: '2025-06-01', amount: '$49.00', status: 'paid' },
  { id: 'inv_002', date: '2025-05-01', amount: '$49.00', status: 'paid' },
];
```

```tsx
<InvoiceHistory invoices={invoices} />
```

## Props

| Prop          | Type                          | Required | Description                             |
| ------------- | ----------------------------- | -------- | --------------------------------------- |
| `invoices`    | `InvoiceItem[]`               | ✅        | List of invoices to display             |
| `className`   | `string`                      | ❌        | Additional CSS classes for styling      |
| `title`       | `string`                      | ❌        | Optional heading text                   |
| `description` | `string`                      | ❌        | Optional description text               |
| `onDownload`  | `(invoiceId: string) => void` | ❌        | Callback if no `invoiceUrl` is provided |

## InvoiceItem

```ts
interface InvoiceItem {
  id: string;
  date: string;
  amount: string;
  status: 'paid' | 'refunded' | 'open' | 'void';
  invoiceUrl?: string;
  description?: string;
}
```

### Credits

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