KQ-594 · RUNNING/TALLY

Running Tally

A movements list where each new entry arrives from the side its sign points to — a credit from the right, a debit from the left, on snap — while the list makes room by animating its height on glide, so the rows below are pushed rather than teleported. The total rolls its digits on glide and a hairline under it wipes toward the side the movement came from before fading, which is the instrument's only celebration: a withdrawal gets the same physics as a deposit, in the other direction. Rows are an ordered list whose direction is spoken as well as drawn, and the settled total is announced politely and reported through onTotalChange from the effect that observed it.

KQ-594 · RUNNING/TALLY

Cleared today

0 entries

No movements yet.

Total $1,180.00 · 0 posted

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/running-tally

Props

entries: TallyEntry[]; default —; The movements, newest first: id, label, signed amount and an optional note.
openingBalance: number; default 0; The figure the entries move from; the total is this plus every entry passed.
max: number; default 5; Rows kept on screen; older ones leave on the exit ease but still count toward the total.
label: string; default —; Names the tally and titles the total.
format: (value: number) => string; default Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }); Formats the total. The default pins an explicit locale so server and client agree.
formatDelta: (value: number) => string; default the same formatter with signDisplay: "always"; Formats a row's amount, so the sign always shows.
onTotalChange: (total: number) => void; default —; Fires from the effect that observes a new total, never during render.

Prop	Type	Default	Description
entries	TallyEntry[]	—	The movements, newest first: id, label, signed amount and an optional note.
openingBalance	number	0	The figure the entries move from; the total is this plus every entry passed.
max	number	5	Rows kept on screen; older ones leave on the exit ease but still count toward the total.
label	string	—	Names the tally and titles the total.
format	(value: number) => string	Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })	Formats the total. The default pins an explicit locale so server and client agree.
formatDelta	(value: number) => string	the same formatter with signDisplay: "always"	Formats a row's amount, so the sign always shows.
onTotalChange	(total: number) => void	—	Fires from the effect that observes a new total, never during render.