shadcn.io is not affiliated with official shadcn/ui
Expense Split Chat Block for React Aria
A flatmates' chat with three expense cards, an end pane of balances worked out in whole cents, the fewest payments to settle up with Mark settled and Undo, and an Add expense form.
Installation
Overview
Show a shared household settling its bills inside the conversation, with this expense split chat for React with React Aria. A hairline frame with a plus mark on each corner holds a wide window of fixed height for Tabford, a shared-bills app: the log holds three expense cards (groceries, the electric bill, pizza night) with the title, the amount, who paid and who shares it, and the end pane lists each person's balance across every card and the fewest payments that clear it, such as "Sam pays Ria $52.50". "Mark settled" records a payment, moves the balances and posts a system line, and "Add expense" opens a Popover form that posts a new card. A Toggle Group switches between the chat and the balances on a phone, and the composer's Shine Button is the only colored control.
FAQ
What stays in the page, and how do I make it real?
The people, the bills and the replies are typed in the file. Nothing is paid: "Mark settled" only records a payment in this demo, with an Undo, and the pane says so. To wire it for real, post the new expense and each settled payment to your ledger, and load the expenses from it instead of the EXPENSES list.
Why do the amounts always add up?
Every amount is whole cents. An expense is split by dividing the cents among the people who share it and giving the odd cents to the first ones, so the shares add up to the bill exactly; the card says "$14.01 or $14.00 each" when the division is uneven. Balances are sums of integers, so the column of balances always totals zero.
How is the Settle up list chosen?
A small greedy helper pairs the person who owes the most with the person owed the most, takes the smaller of the two amounts, and repeats. That clears the books in at most one payment fewer than the number of people with a balance. Marking a payment settled adds it to the balances, so the list recomputes and the payment moves to "Marked settled", where Undo takes it back.
How does the composer work?
Enter sends and Shift and Enter add a line, which the field's description says for a screen reader; Enter during text composition (an IME) is left alone. Send stays quiet while the field is empty and says so if pressed, and focus returns to the field after sending. Replies come from a short typed script keyed on words in your message, with one fallback per message and a last line that says it was the last sample reply.