# Invoice

> An invoice with status timeline, line items, totals, copyable bank details and pay.

Block · Pro · https://lodeui.com/blocks/invoice

## When to use

- Customer portals and billing pages.

## When not to use

- Lists of invoices: use a data table.

## Installation

```bash
npx shadcn@latest add @lode/invoice
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { Invoice } from "@/components/blocks/invoice";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <Invoice />
    </main>
  );
}
```

Built from: Action button, Badge

## API reference

### Invoice

An invoice with a status timeline, parties, line items, totals with discount and VAT, copyable bank details and in-place payment. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach Print, PDF, Send, Copy IBAN and Pay |

## Accessibility

- The amount due is text; status is a badge with words.
- Copy and pay results are announced.

## Motion

- Status steps fill; line items fade up; the badge flips to Paid.

## Responsive behavior

- Parties stack on phones; the line-item table scrolls horizontally.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Generate PDFs on the server; wire the PDF button to that route.

## Related

- [Billing settings](https://lodeui.com/blocks/billing-settings) — Plan, payment method, usage meters, invoices and a prorated plan change.
- [Checkout](https://lodeui.com/blocks/checkout) — Three-step checkout with shipping choice, card entry, promo codes and order summary.
- [Data table](https://lodeui.com/components/data-table) — Sorting, search, filters, selection, bulk actions, column visibility, pagination, expandable rows, export and mobile cards.