Finance payables

Pro

Payables from bill to payment: approve bills one at a time or together, then pay approved bills in a run from one account on one date, with currencies converted and the balance checked before it is sent.

Installs components/ui/finance-payables.tsxDepends on @radix-ui/react-dialog, @radix-ui/react-popover, @radix-ui/react-slot, lucide-reactMotion none in component source

pnpm dlx shadcn@latest add @caliper/finance-payables

Bills

6 unpaid · €24,139 to pay

	Bill	Due	Amount	Actions
	BILL-894 Octopus EnergyNo category	23 Oct	£318.20
	BILL-893 Deloitte LLPAudit and legal	6 Nov	£12,500.00

When to use #

Use it for

Accounts payable and spend products.
Anywhere several payments go out together.

Skip it when

Paying one invoice as a customer; use checkout.

Installation #

terminal

pnpm dlx shadcn@latest add @caliper/finance-payables

Adds its 13 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 FinanceBills and FinancePayments.

example.tsx

import { FinanceBills, FinancePayments } from "@/components/ui/finance-payables"

The worked example comes with Pro

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

Checking your licence…

API reference #

FinanceBills

component

PropTypeDefaultDescription

data *FinanceData—

entityIdstring—

onDataChange *(data: FinanceData) => void—

todaystringnew Date().toISOString().slice(0, 10)ISO date treated as today.

classNamestring—

FinancePayments