Industries/ Real estate
Real estate agent website components for React
An agent site has to capture sellers and reassure buyers. The valuation funnel turns the home worth question into a lead, the listing grid shows inventory and the mortgage calculator sits next to it.
One command for the whole set
npx shadcn@latest add @facade/hero-real-estate @facade/agent-card @facade/property-listing-grid @facade/stats-band @facade/testimonials-wall @facade/valuation-funnel @facade/mortgage-calculator @facade/faq-section @facade/contact-section @facade/footer-big6 of these 10 blocks are Pro and install with a license key; the other 4 are free and MIT licensed. The @facade registry is set up once in components.json. Setup guide.
The page, block by block.
Every preview is the real block running at desktop width. Click a name to open its docs, props and source.
Two ways to open the page.
Example hero copy for real estate agents. Each one answers the question the visitor actually has.
Headline
What is my home worth?
Why it works
A multi-step valuation funnel captures seller leads with an estimate range, address first.
Headline
Can I afford this listing?
Why it works
A mortgage calculator with a down payment slider and an animated breakdown next to the listing grid.
Blocks on this page
- Hero, real estateProBright brokerage hero with a crisp house render, Buy, Rent, Sell search panel and animated proof numbers.
- Agent cardFreeRealtor contact card with initials avatar, rating, license, languages and call, email and tour actions.
- Property listing gridProFilterable, sortable listings grid with animated re-layout, saved homes and load more pagination.
- Stats bandFreeBand of four big animated numbers with labels, trends and hairlines that draw in on view.
- Testimonials wallProMasonry wall of Google and Yelp style reviews with a featured quote and aggregate rating header.
- Home valuation funnelProMulti-step "What's my home worth?" lead funnel with direction-aware steps and an animated estimate range.
- Mortgage calculatorProMonthly payment calculator with down payment slider, loan term toggle and an animated donut breakdown.
- FAQ sectionFreeTwo-column FAQ with an animated accordion, contact prompt and FAQPage JSON-LD for rich results.
- Contact sectionProContact form with floating labels and inline validation, plus NAP details, live open-now hours and a map card.
- Footer, bigFreeLarge local business footer with animated newsletter, link columns, NAP, hours, socials and a giant wordmark.
Questions about real estate agent sites
Something else? Email hello@facadeui.com.
Does the listing grid connect to an MLS or IDX feed?
The grid renders the listings array you pass. Fetch from your MLS, IDX provider or CMS on the server and hand the result to the block. Filtering, sorting and saved homes run in the browser.
How does the valuation funnel estimate a price?
From a base price per square foot you set per market, adjusted by the answers in the funnel. It shows a range and a disclaimer, then collects the lead. Connect a valuation API in the onLead callback if you have one.
Can I change the mortgage calculator defaults?
Yes. Default price, down payment percent, rate, term, tax rate, insurance and HOA are props. Pass the listing price so the calculator opens on the right number.
Is the agent card for one agent or a team?
One card per agent with photo, license, languages, rating and call, email and tour actions. For a team use the team grid or render several cards in a row.
Related industries
- Brokerage10 blocks: real estate hero, listing filters, property listing grid
- Property developer10 blocks: real estate hero, new development showcase, availability table
- Law firm10 blocks: agency hero, stats band, features bento
Read the real estate agent template, section by section or see all industries.