caliper uidocs
DemoSign inGet Pro

Finance invoices

Pro

Receivables: what customers owe in aging buckets that filter the list, part payments and when each was last chased, reminders from an editable preview, and payments recorded outside the bank feed.

Installs components/ui/finance-invoices.tsxDepends on @radix-ui/react-dialog, @radix-ui/react-slot, lucide-reactMotion none in component source
pnpm dlx shadcn@latest add @caliper/finance-invoices

Invoices

7 open · €18,886 owed to you

InvoiceDueOpenChasedActions
INV-2028 FieldnoteIssued 15 Jul · 1 part payment61 days late£1,400.00of £2,400.0025 Sept (3×)
INV-2033 Lumen LabsIssued 20 Aug25 days late£490.006 Oct (2×)
INV-2037 BrightwellIssued 1 Sept13 days late£2,400.00Never
INV-2038 BrightwellIssued 8 Sept6 days late£1,200.00Never
INV-2041 Ostra FreightIssued 12 Sept2 days late€4,800.00Never
INV-2040 Kestrel BioIssued 15 Sept15 Oct£1,250.00Never
INV-2042 Palisade HotelsIssued 2 Oct1 Nov€6,200.00Never

When to use #

Use it for

  • Accounting and invoicing products.
  • Any team that chases money owed to it.

Skip it when

  • Creating an invoice; use the invoice editor.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/finance-invoices

Adds its 12 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.

example.tsx
import { FinanceInvoices } from "@/components/ui/finance-invoices"

The worked example comes with Pro

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

Checking your licence…

API reference #

FinanceInvoices

component
PropTypeDefaultDescription
data *FinanceData—
entityIdstring—Only this entity's invoices; all entities when absent.
onDataChange *(data: FinanceData) => void—
todaystringnew Date().toISOString().slice(0, 10)ISO date treated as today.
you *string—Signs reminders.
classNamestring—

Accessibility #

It exposes group and status semantics, with aria-label, aria-pressed, aria-hidden, aria-invalid and aria-describedby kept in step with state. Changes that matter are announced through a live region.

Keyboard and focus handling comes from Radix dialog: arrow keys move through items, Enter and Space select, and Escape closes and returns focus.

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.