shadcn.io is not affiliated with official shadcn/ui
Budget Planner Chat Block for React
A household chat where an Expense mode turns a line such as 42 groceries into an expense card and takes it from an envelope, with three envelopes at the end showing what remains in whole cents and a word and triangle when one goes over.
Installation
Overview
Keep a shared budget in the conversation, with this budget planner chat for React with Base UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Thriftleigh, a household budgeting app: the top bar names your partner, Anneka Palliser, the log is plain Message and Bubble rows, and an Envelopes pane at the end lists Groceries, Rent and Fun, each with a Progress bar and a line such as "$212 remaining" worked out in whole cents. The composer has a Toggle Group of Message and Expense: in Expense mode a line like "42 groceries" is checked, posts an expense card and a quiet system line with what remains, and takes the amount from that envelope. A line that does not parse says why in a reserved line and posts nothing, and an envelope that goes over shows a word and a triangle, never a color. The composer's Shine Button is the only colored control, and on a phone a Chat and Envelopes switch shows one pane at a time. It's the starting point for a household finance app, a shared expense log or any chat that records numbers.
FAQ
What stays in the page, and how do I make it real?
All of it. The envelopes, the amounts you log and the replies live in this page's state and are gone on reload; nothing is saved or sent and no model runs, as the line under the composer says. To wire it for real, write the parsed expense to your ledger where logExpense runs, load the envelope budgets and spent totals from your data, and push your partner's entries into the same state.
What does Expense mode accept?
An amount with up to two decimals, optionally with a dollar sign, then the name of an envelope: "42 groceries", "$12.50 fun". Anything else is refused with a sentence that says what to type, the line stays in the field, and nothing is posted. Add envelopes by adding entries to ENVELOPES and the pane, the parser and the cards follow.
Why whole cents?
Every amount is an integer number of cents, so "$212 of $400" and the totals in the pane header add up exactly with no floating point drift. Dollars are only formatted when drawn.
How do I tell an envelope is over budget without color?
The line beside its name changes from "$40 remaining" to "$25 over" and gains a triangle glyph, the bar fills to its end, and the pane's footnote counts how many envelopes are over. Try logging 300 to Fun.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log, so each expense card and the "remaining" line are read once. The mode switch is a labelled group with a pressed state, the problem line is an alert, and every envelope has a heading, a labelled progress bar and its sentence.