Invoice detail

Pro

An issued invoice as the customer reads it: parties with tax ids, lines, discount, VAT or reverse charge, payments made and the balance, with copy link, email, download and pay.

Installs components/ui/invoice-detail.tsxDepends on @radix-ui/react-slot, lucide-reactMotion none in component source

pnpm dlx shadcn@latest add @caliper/invoice-detail

Open€184.41 due 15 October 2026

Invoice

INV-2026-0931

Issued: 1 October 2026
Due: 15 October 2026

FromHalden Software, Lda.Rua do Alecrim 121200-018 Lisboa, PortugalVAT PT514298311

Bill toNorthwind GmbHAccounts payableTorstraße 14010119 Berlin, GermanyVAT DE298431107

Lines on invoice INV-2026-0931
Description	Qty	Unit price	Amount
Team plan8 seats · 1 Oct – 31 Oct 2026	8	€18.00	€144.00
Additional seats, prorated2 seats from 14 Oct	2	€10.45	€20.90
Data residency add-onEU region	1	€40.00	€40.00

Subtotal: €204.90
Annual partner discount 10%: −€20.49
VAT (reverse charge): €0.00
Total: €184.41
Amount due: €184.41

When to use #

Use it for

Billing history in an app.
A hosted invoice page.

Skip it when

Writing an invoice; use the invoice editor.

Installation #

terminal

pnpm dlx shadcn@latest add @caliper/invoice-detail

Adds its 5 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source. It is built from invoiceBalance and InvoiceDetail.

example.tsx

import { invoiceBalance, InvoiceDetail } from "@/components/ui/invoice-detail"

The worked example comes with Pro

The 37-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

invoiceBalance

component

No props of its own; it accepts the native props of its root element.

InvoiceDetail

component

PropTypeDefaultDescription

number *string—

status *InvoiceStatus—

issued *string—

due *string—

from *InvoiceParty—

to *InvoiceParty—

lines *readonly InvoiceDetailLine[]—

taxRate *number—e.g. 0.23 for 23% VAT. Ignored with `reverseCharge`.

reverseChargebooleanfalseEU B2B: the customer accounts for VAT.

discount{ label: string; amount: number; }—

paymentsreadonly InvoicePayment[][]

currencystring"EUR"

notesstring—

linkstring—A shareable link to this invoice.

onPay(() => void)—

onDownload(() => void)—Defaults to printing, which can save a PDF.

onEmail(() => void)—

classNamestring—

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.