caliper uidocs
DemoSign inGet Pro

Finance close

Pro

The month-end close for an entity: the checklist by section with owners and the working day each task is due, late ones marked, who did what, and the period locked when it is all done.

Installs components/ui/finance-close.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-close

Close September 2026

Halden Ltd · 2 of 9 done · 6 late

Locking September becomes possible when every task is done and signed off.

Bank and cash2/2

  • Reconcile Barclays and Wise to statementsDone by you on 2 Oct · signed off by Priya RamanWD2 · 2 Oct
  • Revalue USD balances at month-end rateDone by you on 5 OctWD3 · 5 Oct

Receivables0/2

  • Review invoices over 60 daysPriya RamanWD3 · 5 Oct (late)
  • Book bad debt provisionPriya RamanWD5 · 7 Oct (late)

Payables0/2

  • Accrue bills received after month endDone by Tomás Ferreira on 6 Oct · reviewer Priya RamanWD4 · 6 Oct (late)
  • Approve and post September expensesMaya ChenWD4 · 6 Oct (late)

Accruals and prepayments0/2

  • Release prepaid softwareTomás FerreiraWD5 · 7 Oct (late)
  • Accrue September payroll taxesMaya Chen · reviewer Tomás FerreiraWD6 · 8 Oct (late)

Review0/1

  • Management accounts to the boardMaya ChenWD10 · 14 Oct

When to use #

Use it for

  • Accounting teams closing books each month.
  • Any recurring checklist with deadlines relative to a date.

Skip it when

  • A one-off project plan; use the release checklist.

Installation #

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

Adds its 14 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 { FinanceClose } from "@/components/ui/finance-close"

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 #

FinanceClose

component
PropTypeDefaultDescription
data *FinanceData—
entityId *string—
onDataChange *(data: FinanceData) => void—
todaystringnew Date().toISOString().slice(0, 10)ISO date treated as today, for what is late.
you *string—Your name: who ticked a task, and what Mine shows.
classNamestring—

Accessibility #

It exposes note, alert and status semantics, with aria-hidden, aria-describedby, aria-labelledby, aria-label, aria-expanded and aria-invalid 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.