KQ-671 · ENVELOPE/ROW

Envelope Row

Budget envelopes as a row of cards, each filling from the bottom with the share of its allocation already spent — a scaleY on glide, because an amount settles rather than switches. Dragging the coin out of a card's socket lifts it onto two motion values that track the pointer with no render per frame; releasing over another envelope commits the transfer and the coin flies the rest of the way on glide while the remainder chips settle on recoil. Enter or Space lifts the coin, Arrow keys walk the row, a second Enter or Space drops it and Escape puts it back.

KQ-671 · ENVELOPE/ROW

Fieldline · October$880 set aside

Drag a coin, or press an envelope, to lift $25.

$880 allocated · $266 left

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/envelope-row

Props

envelopes / defaultEnvelopes: EnvelopeItem[]; default —; Controlled or initial envelopes: { id, name, allocated, spent }.
onEnvelopesChange: (next: EnvelopeItem[]) => void; default —; Fires from the drop or key that moved money, with the whole new row.
onTransfer: (from: string, to: string, amount: number) => void; default —; Fires from the same event with just the move.
step: number; default 25; Money moved by one drop.
format: (value: number) => string; default —; Formats every amount; defaults to an explicit en-US currency formatter so the server and the client agree.
label: string; default Envelopes; Names the row; printed above it and used for assistive technology.

Prop	Type	Default	Description
envelopes / defaultEnvelopes	EnvelopeItem[]	—	Controlled or initial envelopes: { id, name, allocated, spent }.
onEnvelopesChange	(next: EnvelopeItem[]) => void	—	Fires from the drop or key that moved money, with the whole new row.
onTransfer	(from: string, to: string, amount: number) => void	—	Fires from the same event with just the move.
step	number	25	Money moved by one drop.
format	(value: number) => string	—	Formats every amount; defaults to an explicit en-US currency formatter so the server and the client agree.
label	string	Envelopes	Names the row; printed above it and used for assistive technology.