shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Let buyers see what a home might cost a month, as an estimate, with this property card for React with Ark UI. A hairline frame holds a drawn house with its price, bedrooms, baths and floor area, and a heart Toggle that saves it. At the end a Slider sets the deposit from 5 to 40 percent, a Toggle Group sets a 15 or 25 year term, and the card writes "About $1,830 a month" from the standard repayment formula at a typed 4.9 percent shown beside it. A description list gives the price, the deposit and the loan. An outline button asks a question, and the card says plainly that it is an estimate, not an offer. For estate agents, new-build sites and listing pages.
FAQ
What is the formula?
The standard repayment formula: loan times the monthly rate, divided by one minus the monthly factor to the power of minus the number of months. The loan is the price less the deposit, both in integer cents, and the result is rounded to the nearest ten dollars for the "About" figure.
Where do I change the rate and the price?
At the top of the file: PRICE_CENTS, RATE_PERCENT, the deposit range and step, and the TERMS array. A real card would take the rate from a rate service and say when it was last updated.
Is this an offer or advice?
No, and the card says so beside the button and in the FAQ. It is an illustration from a typed rate. Real lending needs affordability checks, fees and the lender's own terms.
What stays local, and how do I wire it for real?
The saved home and the question are page state, and nothing is stored or sent. Replace the body of save with a call to your saved-homes endpoint and the body of ask with your enquiry form.
