Finance reconcile
ProBank reconciliation: each line beside the invoices or bills that could settle it, with the reasons in words; tick several to balance it, small FX differences booked for you, rules for next time, and undo.
pnpm dlx shadcn@latest add @caliper/finance-reconcileReconcile
Barclays ·· 4410 · 5 to match · balance £182,440.12
KESTREL BIO LTD
13 Oct · money in, match it to invoices
Suggested
- Bank line
- £1,250.00
- Selected
- £1,250.00
- Difference
- £0.00
It balances.
When to use #
Use it for
- Accounting products that import bank transactions.
- Payment operations matching payouts to orders.
Skip it when
- Viewing transactions only; use a data table.
Installation #
pnpm dlx shadcn@latest add @caliper/finance-reconcile
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.
import { FinanceReconcile } from "@/components/ui/finance-reconcile"
The worked example comes with Pro
The 143-line example behind the preview opens here with a Pro or Team licence.
API reference #
FinanceReconcile
component
Accessibility #
It exposes status semantics, with aria-hidden, aria-label, aria-current, aria-labelledby, aria-live and aria-expanded kept in step with state. Changes that matter are announced through a live region.
Keyboard and focus handling comes from Radix dialog and popover: 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.