shadcn.io is not affiliated with official shadcn/ui
Payment Estimator Footer Block for React
A footer for a property marketplace with a monthly payment estimator (a home price slider, a 15 or 30 year term select, fixed example terms and a live estimated payment) beside the links, and an equal-housing notice with a licence number in the legal band.
Installation
Overview
A footer with a working calculator for React with Base UI, split by a divider. At the start sit the wordmark, one sentence and two link groups in a nav labelled Footer. At the end a raised estimator in a tinted shell: a Slider for the home price (from 100,000 to 1,500,000), a Select for the term (30 or 15 years), the fixed example terms (20% down, a 6.5% rate) and the estimated monthly payment, written with FormatNumber. A polite status line speaks the result once per change. The sum is principal and interest only, labelled "Example only, not an offer"; the terms are fixed and nothing is sent anywhere. A legal band closes the page with an equal-housing notice (a drawn house and plain words, copying no real mark), an example broker licence number and the policy links. It's built from Guides, Slider, Select, Format and your theme's tokens.
FAQ
How is the payment worked out?
The loan is the price minus the down payment (20%), at a fixed example annual rate of 6.5% paid monthly over the chosen term, with the usual amortisation formula. Taxes, insurance and fees are not included, and the block says so. Change DOWN_SHARE and RATE at the top of the file for your own example, and keep the visible "20% down, example rate" line in step with them.
Is this a quote or an offer?
No. It is an illustration, labelled "Example only, not an offer". Never present a figure like this as a real rate: if you quote real rates, take them from your lender's feed and follow your regulator's wording.
How do I use it without a mouse?
Tab to the slider and use the arrow keys (Home and End jump to the ends); its value is read as a dollar amount. Tab to the term control and open it with Enter or Space. The estimate updates as you move, and the status line speaks the new payment once you stop.
Is the equal-housing notice a real mark?
No. It is a plain drawn house and words of your own, so no official mark is copied. Replace the wording with what fair-housing rules require where you operate, and use the licence number your regulator gave you.
How do screen readers move through it?
The block is a footer. The links are one nav labelled Footer with h2s, the estimator has its own h2, the slider and the select are named controls, and the legal links are a labelled list. The estimated payment is plain text, and the status line announces it politely after each change.
Related
- Pro
Localization Footer
PreferencesA footer for a payroll tool with a country Select and a currency Select beside a price sample that is reformatted as you choose.
- Pro
Seat Stepper Footer
Plans and estimatesA footer for a team learning subscription with a seats stepper from 1 to 50, the monthly total worked out from it, a Renews on the 1st line and a Manage subscription button, beside two link groups.
- Pro
Delivery Estimator Footer
Plans and estimatesA footer for a home-goods shop with a postcode delivery estimate, four link columns, and a row of generic payment marks.
- Pro
Licence Table Footer
Trust and complianceA footer for a brokerage app with a framed licence table (jurisdiction, authority, registration number), an expandable Important disclosures panel and a trading status line in the legal band.
- Pro
Upgrade Meter Footer
Plans and estimatesA slim footer for cloud storage with a plan band: the plan name, the space used and free, a thin meter, the share as a number and an Upgrade button, over a row of links and a legal band.
- Pro
Plan Pills Footer
Plans and estimatesA footer for an invoicing tool with three plan pills, Free, Pro and Team, that show the chosen plan's price and three inclusions beside a Compare plans link, over two link groups and a legal band.