Real Estate Page React template for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Real Estate Page is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import RealEstatePage from @/components/templates/real-estate-page.

// app/page.tsx
"use client"

import Link from "next/link"
import { RealEstatePage, type RealEstateValuationValues } from "@/components/templates/real-estate-page"

async function requestValuation(values: RealEstateValuationValues) {
  await fetch("/api/valuations", { method: "POST", body: JSON.stringify(values) })
}

export default function HomeRoute() {
  return <RealEstatePage linkComponent={Link} defaultMode="buy" onValuation={requestValuation} />
}

Props

• listingsdefault "REAL_ESTATE_LISTINGS"
  RealEstateListing[]

  { id, mode, price, previousPrice?, address, neighborhood, city, beds, baths, sqft, kind, color, image?, lat, lng, badge?, href?, favorite? }. mode buy or rent (rent prices are per month); kind picks the drawn photo (brownstone, condo, loft, house, townhouse) tinted with color, image replaces it; lat / lng place the map pin.

• neighborhoodsdefault "REAL_ESTATE_NEIGHBORHOODS"
  RealEstateNeighborhood[]

  { name, medianPrice, medianRent?, homes, trend?, description?, color } tiles; the rent median shows in rent mode, trend is a yearly percent. An empty array hides the section.

• agentsdefault "REAL_ESTATE_AGENTS"
  RealEstateAgent[]

  { name, role, phone, email, avatar?, sales?, rating?, areas?, languages? } cards with Call and Email links.

• testimonialsdefault "REAL_ESTATE_TESTIMONIALS"
  Testimonial[]

  Client quotes for the testimonials grid (the TestimonialsSection shape).

• statsdefault "REAL_ESTATE_STATS"
  RealEstateStat[]

  { value, label } numbers under the search; an empty array hides them.

• phonedefault "(718) 555-0100"
  string

  The office number in the header, the phone menu and the valuation band (a tel: link); empty hides it.

• labels
  Partial<RealEstatePageLabels>

  Every string on the page: the brand, the hero, the search, the section headings, the calculator, the form and its errors. Some are functions (matches, listingsTitle, bedCount, showHomes, successDescription).

• currencydefault "USD"
  string

  ISO currency of every price, pin, median and payment.

• localedefault ""
  string

  Intl locale for prices and numbers; empty uses the UIProvider's, else en-US.

• mode
  "buy" | "rent"

  Buy or rent (controlled): the search, the featured homes, the map and the neighborhood medians follow it.

• defaultModedefault "buy"
  "buy" | "rent"

  The mode on first render (uncontrolled). Switching resets the price filter, since sale and rent bands differ.

• onModeChange
  (mode: "buy" | "rent") => void

  Fires when the Buy / Rent switch changes.

• onSearch
  (search: RealEstateSearch) => void

  Runs on Search, on Show homes in the filters sheet and on a neighborhood tile with { mode, location, price: [min, max], minBeds }. The listings filter live either way; use it to fetch or to sync the URL.

• onValuation
  (values: RealEstateValuationValues) => void | Promise<unknown>

  Runs on Request my valuation with { address, propertyType, beds, timeline, name, email, phone }. A returned promise keeps the button loading; a rejection keeps the form and shows labels.failed. Without it the page pretends for 900 ms, then confirms.

• onFavoriteChange
  (listing: RealEstateListing, favorite: boolean) => void | Promise<unknown>

  Runs when a heart is pressed. A returned promise keeps the heart on while pending; a rejection rolls it back.

• pricePresetsdefault "REAL_ESTATE_PRICE_PRESETS"
  Record<"buy" | "rent", PriceRangeValue[]>

  The price bands of the search and the filters sheet, per mode, as [min, max] pairs (null is an open end).

• mortgagedefault "DEFAULT_REAL_ESTATE_MORTGAGE"
  Partial<RealEstateMortgage>

  { price, downPayment (percent), rate (yearly percent), term (15, 20 or 30 years), taxRate (yearly percent of the price), insurance and hoa (per month) }: the calculator's starting numbers and the averages behind the breakdown.

• mapBoundsdefault "REAL_ESTATE_MAP_BOUNDS"
  RealEstateMapBounds

  { north, south, west, east } of the drawn map; pins are placed by lat / lng inside it and pulled in at the edges.

• featuredCountdefault 6
  number

  Listing cards shown from 768px before Show all; phones get every match in the rail.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Accents: the selected map pin, the price slider and histogram, the mortgage sliders and payment bar, the agent stars and the testimonial metrics.

• ctaTonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Search, Free valuation, Show homes and Request my valuation.

• favoriteTonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The heart on a saved home; neutral is white on the photo.

• radiusdefault "lg"
  "none" | "sm" | "md" | "lg"

  Corners of the listing, map, neighborhood, calculator, agent and form cards: 0 / 12 / 16 / 24px; the photos inside follow.

• backgrounddefault "glow"
  "plain" | "soft" | "glow" | "aurora" | "grid" | "dots"

  The main background: plain is the bare page color; the others tint the page and add a glow, an aurora, a grid or dots over the first screen.

• backgroundColordefault "oklch(0.62 0.14 275)"
  string

  The tint and glow color of the main background.

• bandBackgrounddefault "muted"
  "muted" | "tinted" | "gradient" | "dots"

  The secondary background of every second section (the map, the mortgage and the testimonials with all sections on). Cards and fields inside are lifted one step above it.

• bandColordefault "oklch(0.62 0.14 275)"
  string

  The tint of tinted and gradient bands; left equal to backgroundColor it follows it.

• showMapdefault true
  boolean

  The map band with the price pins and the list beside it (and its header link).

• showNeighborhoodsdefault true
  boolean

  The neighborhood tiles with medians and trends.

• showMortgagedefault true
  boolean

  The mortgage estimate; off also removes Estimate payment from the map preview.

• showAgentsdefault true
  boolean

  The agent cards with Call and Email links.

• showTestimonialsdefault true
  boolean

  The testimonials section.

• showValuationdefault true
  boolean

  The Request a valuation band. Off, Free valuation in the header calls the office instead.

• headerdefault true
  boolean

  The sticky header with the brand, the section links, the phone number and Free valuation.

• footerdefault true
  boolean

  The footer with Buy, Rent, Sell and Company links and the broker's legal line.

• headerProps
  Partial<MarketingHeaderProps>

  Anything for MarketingHeader (layout, variant, items...); wins over the page's own values.

• footerProps
  Partial<MarketingFooterProps>

  Anything for MarketingFooter (variant, columns, socials, newsletter...).

• testimonialsProps
  Partial<TestimonialsSectionProps>

  Anything for the TestimonialsSection (layout, columns, card...).

• animateIndefault true
  boolean

  The hero and the search rise in once when the page mounts on the client; never during hydration, under reduced motion or in thumbnails.

• linkComponent
  (props: LinkComponentProps) => ReactNode

  The router link for the listing, header and footer links (next/link in an app).

• className
  string

  Classes for the root.

• classNames
  Partial<Record<RealEstatePageSlot, string>>

  Classes for header, hero, search, filters, listings, listing, photo, map, mapList, neighborhoods, neighborhood, mortgage, agents, agent, testimonials, valuation, form and footer.

Parts

FAQ