KQ-593 · LEDGER/LINE

Ledger Line

A transaction row that opens where it stands: pressing expands its merchant, category, running balance and reference on glide to a height a ResizeObserver measured, with the facts arriving on a cascade and the chevron turning on snap. A pending entry sweeps a soft band along its amount on a linear tween driven entirely by the status prop, and a settling entry stamps a tick that draws itself with pathLength on flick and lands from 1.3x on recoil. The row is a real aria-expanded button — Enter and Space toggle, Escape closes — and pending is a word and a hatch, never colour alone.

KQ-593 · LEDGER/LINE

Merchant
Fernworks Supply Co
Category
Hardware
Running balance
$8,412.60
Reference
REF 4K2-8810

Open Fernworks Supply · 1 pending

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/ledger-line

Props

title: string; default —; What the entry says on the statement.
amount: number; default —; Signed major units; negative is a debit and the row composes the sign itself.
date: string; default —; An already-formatted day label, so the row never reads a clock.
status: "pending" | "settled"; default "settled"; Pending shimmers along the amount; settling stamps the tick.
merchant: string; default —; The resolved merchant line in the detail.
category: string; default —; Category chip in the detail; its dot sits on the label's centreline.
runningBalance: number; default —; Balance after this entry; omitted, the line is left out.
reference: string; default —; Reference code in the detail.
open / defaultOpen: boolean; default false; Controlled or initial expansion.
onOpenChange: (open: boolean) => void; default —; Fires from the press or the Escape that changed it.
format: (value: number) => string; default Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }); Formats an unsigned amount. The default pins an explicit locale so server and client agree.

Prop	Type	Default	Description
title	string	—	What the entry says on the statement.
amount	number	—	Signed major units; negative is a debit and the row composes the sign itself.
date	string	—	An already-formatted day label, so the row never reads a clock.
status	"pending" \| "settled"	"settled"	Pending shimmers along the amount; settling stamps the tick.
merchant	string	—	The resolved merchant line in the detail.
category	string	—	Category chip in the detail; its dot sits on the label's centreline.
runningBalance	number	—	Balance after this entry; omitted, the line is left out.
reference	string	—	Reference code in the detail.
open / defaultOpen	boolean	false	Controlled or initial expansion.
onOpenChange	(open: boolean) => void	—	Fires from the press or the Escape that changed it.
format	(value: number) => string	Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })	Formats an unsigned amount. The default pins an explicit locale so server and client agree.