shadcn.io is not affiliated with official shadcn/ui
Payment Estimator Footer Block for Vue
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 Vue with Ark 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.