Billing Multi Currency Invoice Preview

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing75.tsx instead.

Usage

The file also exports billing75Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Billing75, billing75Demo } from "@/components/blocks/billing/billing75";

export default function Page() {
  return <Billing75 {...billing75Demo} />;
}

Props

Types

interface InvoiceCurrency {
  code: string;
  symbol: string;
  rate: number;
}

interface InvoiceLineItemUsd {
  description: string;
  quantity?: number;
  amountUsd: number;
}

Behavior notes

• The active currency is local component state; every amount on screen (line items, subtotal, tax, total) is recalculated from the USD source values whenever the toggle changes, with no page reload.
• Amounts are formatted with Intl.NumberFormat's currency style using the active currency's ISO code, so symbol placement and decimal precision follow that locale's convention automatically, not a hardcoded prefix.
• The tax row only renders when taxRatePercent is greater than 0, so invoices with no tax collapse to a two-line subtotal/total breakdown.
• The Download PDF link is a next/link with the current downloadHref, it doesn't itself regenerate a PDF in the selected currency, that's left to your backend.
• If a currency code you pass isn't a valid ISO 4217 code, Intl.NumberFormat throws; the component catches that and falls back to a plain two-decimal number for that currency.

Frequently asked questions