shadcn.io is not affiliated with official shadcn/ui
Real Estate Agent Chat Block for React
An estate agent posts a listing card with a drawn house, price, beds, baths and area, and a folded Estimate payment row where a down-payment slider, a rate and a 15 or 30 year term work out the monthly payment.
Installation
Overview
Show a buyer talking to an estate agent, with this real estate agent chat for React with Base UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Gablefield Realty: the top bar names the agent, Sofia Reyes, with "Gablefield Realty, online" and a sample licence number, and the log is Message and Bubble rows with a listing card under her second message. The card has a drawn grey house, the price, beds, baths, area and address, and a Collapsible row, "Estimate payment", that loads open: a Slider sets the down payment from 5 to 40 percent, an Input takes the interest rate, a Toggle Group picks a 15 or 30 year term, and a list shows the loan, the rate, the term and the monthly payment. "Similar homes" under her message posts a second listing with its own estimate. The composer's Shine Button, the only colored control, sends, and the frame is ruled by Guides. For an agency, a mortgage broker or any listing that needs a cost beside its price.
FAQ
What stays in the page, and how do I make it real?
Everything. The listings are typed in the file, the drawing is a few grey shapes, and the replies are a short script keyed on words such as "similar", "monthly" and "viewing". Nothing is sent and no model runs. To make it real, load listings from your own API where the cards are drawn and send the text from post to your agents; the estimate can stay in the browser.
How is the monthly payment worked out?
amortise(loan, rate, years) applies the standard repayment formula to the loan after your down payment, with the yearly rate split into twelve months, and rounds once to whole cents. Money is kept as integer cents throughout and shown to the dollar. They are example figures, not an offer, and the card says so.
What happens with a rate that isn't a number?
The field accepts a rate from 0.5 to 15 percent, with a comma or a point. Anything else leaves the loan and term as they are, shows dashes for the rate and the monthly figure, and reveals "Enter a rate from 0.5 to 15." in a line that is always reserved, so nothing moves.
Why does each listing have its own estimate?
So you can compare. The cards hold their own down payment, rate and term; changing one never changes the other, and each remembers its choices while you scroll the thread.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log. The Collapsible trigger reports whether it is open, the slider reads "20 percent down", the term group is named "Term", and the drawn house is hidden from assistive technology because the facts beside it are in text.