KQ-739 · BILL/CALENDAR

Bill Calendar

A month of bills, each on the day it lands, over a balance line that shows what the account holds on every one of those days. The line is one column per day — a balance is piecewise-constant between bills — and each column's height animates on glide, so moving a bill re-plots the month with a layout's physics. Dragging a chip captures the pointer only after 4px of travel while a carry chip follows it inside the card's frame and the day beneath lights as the drop target; on release the bill lands on recoil. Arrows walk days, Enter lifts the bill on the focused day, arrows choose its new day, Enter drops it and Escape cancels.

KQ-739 · BILL/CALENDAR

Coldbrook Bank · November bills5 due · $1,638.00

Low $542.00 on the 26opens $2,180.00

November 3 · Fernworks Rent $1,150.00$1,030.00

November · 5 bills $1,638.00 · low $542.00 on the 26 · no moves yet

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/bill-calendar

Props

bills / defaultBills: Bill[]; default []; Controlled or initial bills, each with id, label, amount and day.
onBillsChange: (bills: Bill[]) => void; default —; Fires from the drop or the keyboard move that changed a day.
onBillMove: (bill: Bill, fromDay: number, toDay: number) => void; default —; Fires alongside it with the move itself, for an undo line.
openingBalance: number; default —; What the account holds before the first of the month.
days: number; default 30; Days in the month.
startWeekday: number; default 0; Column the 1st sits in, 0 = Monday.
monthLabel: string; default This month; Printed in the header and in every day's label.
floor: number; default 0; Balance under this reads danger and the day's label says overdrawn.
format: (value: number) => string; default USD Intl.NumberFormat; Formats every amount.
label: string; default Bill calendar; Names the grid for assistive technology.

Prop	Type	Default	Description
bills / defaultBills	Bill[]	[]	Controlled or initial bills, each with id, label, amount and day.
onBillsChange	(bills: Bill[]) => void	—	Fires from the drop or the keyboard move that changed a day.
onBillMove	(bill: Bill, fromDay: number, toDay: number) => void	—	Fires alongside it with the move itself, for an undo line.
openingBalance	number	—	What the account holds before the first of the month.
days	number	30	Days in the month.
startWeekday	number	0	Column the 1st sits in, 0 = Monday.
monthLabel	string	This month	Printed in the header and in every day's label.
floor	number	0	Balance under this reads danger and the day's label says overdrawn.
format	(value: number) => string	USD Intl.NumberFormat	Formats every amount.
label	string	Bill calendar	Names the grid for assistive technology.