Industries/ Real estate
Property developer website components for React
Buyers of new construction want to know which units are still available and whether to decide now. A clickable building elevation with status coded units, a live availability table, floor plan hotspots and an honest launch countdown deliver both.
One command for the whole set
npx shadcn@latest add @facade/hero-real-estate @facade/new-development-showcase @facade/availability-table @facade/hotspot-image @facade/image-gallery-lightbox @facade/key-facts @facade/countdown @facade/urgency-badge @facade/multi-step-lead-form @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 property developers. Each one answers the question the visitor actually has.
Headline
Which units are still available?
Why it works
A clickable building elevation with status coded units and a live sortable table that turns into cards on a phone.
Headline
Should I decide now?
Why it works
A countdown to launch and a percent sold badge create urgency from real numbers, not fake timers.
Blocks on this page
- Hero, real estateProBright brokerage hero with a crisp house render, Buy, Rent, Sell search panel and animated proof numbers.
- New development showcaseProInteractive building elevation with clickable, status-coded units, a detail panel and availability counters.
- Availability tableProSortable, filterable unit availability table for new developments that turns into cards on mobile.
- Hotspot imageProImage or floor plan with hotspots that open calm detail cards for each room or feature.
- Image gallery lightboxProListing photo grid that opens a shared layout lightbox with arrows, keyboard control and thumbnails.
- Key factsFreeProperty key facts row with icons and numbers that count up when scrolled into view.
- CountdownFreeCountdown to an open house or launch with rolling flip digits for days, hours, minutes and seconds.
- Urgency badgeFreeScarcity badge with a live dot and an optional percent sold bar that animates into view.
- Multi-step lead formProThree step quote request with option cards, validation, progress bar and direction-aware transitions.
- Footer, bigFreeLarge local business footer with animated newsletter, link columns, NAP, hours, socials and a giant wordmark.
Questions about property developer sites
Something else? Email hello@facadeui.com.
How do I keep the building showcase and the table in sync?
Both read the same units array: id, floor, rooms, area, price and status. Update the array from your CRM or a JSON file and both blocks follow.
Does the floor plan hotspot block need a special image?
No. Any image or SVG works. Hotspots use percent coordinates, so they stay in place at every size. Each hotspot opens a detail card with a title, text and an optional image.
Is the countdown honest marketing?
It counts to a real date you pass: sales launch, show apartment opening or completion. When the date passes it shows the complete content you define. There is no evergreen reset.
Can the lead form capture unit interest?
Yes. Make step one the unit type and step two the budget or timeline, then contact details. The onSubmit payload includes every answer.
Related industries
- Brokerage10 blocks: real estate hero, listing filters, property listing grid
- Real estate agent10 blocks: real estate hero, agent card, property listing grid
- Marketing agency10 blocks: agency hero, logo cloud, features bento
Read the property developer template, section by section or see all industries.