Skip to main content
Clever Ops

Real Estate Agency Template

Complete independent-agency site, the listing card as art direction: address-led hero, sold ledger with one SOLD stamp, suburb reports, team, plain fees, appraisal form.

Preview & code

Loading Real Estate Agency Template preview

Installation

pnpm dlx shadcn@latest add @cleverui/template-real-estate

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx
import { TemplateRealEstate } from '@/components/blocks/template-real-estate'
Exampletsx
import { TemplateRealEstate } from '@/components/blocks/template-real-estate'

export default function TemplateRealEstateDemo() {
  return <TemplateRealEstate />
}

API reference

TemplateRealEstate accepts the following props.

PropTypeDefaultDescription
contentHalloranContentdefaultContentoverride any slice of the page, defaults to the Halloran & Co. fixture above
classNamestring

Referenced types

Typestsx
export interface HalloranContent {
  /** identity, nav mark, wordmark tag */
  brand: { name: string; tag: string }
  nav: { links: HalloranLink[]; phone: HalloranLink; cta: HalloranLink }
  /** the flagship listing: the address is the display type */
  hero: {
    eyebrow: string
    address: string
    suburbLine: string
    description: string
    guide: string
    guideLabel: string
    auctionLine: string
    specs: string[]
    inspections: string[]
    primaryCta: HalloranLink
    secondaryCta: HalloranLink
    /** labels on the structural elevation placeholder */
    photo: { caption: string; plate: string; frontage: string }
    stats: HalloranSuburbStat[]
    statsNote: string
  }
  /** 01, the current book, addresses set big */
  current: {
    sheet: string
    title: string
    lede: string
    items: HalloranListing[]
    quietBook: { label: string; title: string; body: string; cta: HalloranLink; footnote: string }
  }
  /** 02, the sold ledger, one stamp earned */
  sold: {
    sheet: string
    title: string
    lede: string
    stamp: string
    summary: string[]
    /** four column labels: address, price, days, method */
    columns: string[]
    rows: HalloranResult[]
    note: string
  }
  /** 03, interactive suburb reports */
  suburbs: {
    sheet: string
    title: string
    lede: string
    items: HalloranSuburb[]
    changeCaption: string
    daysCaption: string
    footnote: string
  }
  /** 04, the agents and their streets */
  team: { sheet: string; title: string; lede: string; members: HalloranAgent[] }
  /** 05, the fee stated plainly, plus the campaign plan */
  selling: {
    sheet: string
    title: string
    lede: string
    commitmentsLabel: string
    commitments: { title: string; body: string }[]
    example: {
      label: string
      heading: string
      rate: string
      rateLabel: string
      rateNote: string
      items: HalloranFeeItem[]
      totalLabel: string
      totalValue: string
      inclusions: string[]
      note: string
    }
    weeksLabel: string
    weeks: HalloranWeek[]
    milestoneTag: string
    note: string
  }
  /** 06, the appraisal ask, a working form */
  appraisal: {
    sheet: string
    title: string
    lede: string
    form: {
      addressLabel: string
      addressPlaceholder: string
      phoneLabel: string
      phonePlaceholder: string
      bedsLabel: string
      beds: string[]
      timeframeLabel: string
      timeframes: string[]
      buttonLabel: string
    }
    confirmation: { heading: string; agent: string; callWindow: string; note: string }
    proofLine: string
    privacyNote: string
  }
  footer: {
    tagline: string
    columns: { label: string; links: HalloranLink[] }[]
    contact: { label: string; value: string; href: string }[]
    hours: { label: string; lines: string[] }
    legal: HalloranLink[]
    /** ABN, licence and copyright lines */
    meta: string[]
  }
  /** fixed appraisal bar on small screens */
  actionBar: { label: string }
}

export interface HalloranLink {
  label: string
  href: string
}

export interface HalloranSuburbStat {
  label: string
  /** preformatted, e.g. "$2,680,000" or "+4.2%" */
  value: string
}

export interface HalloranListing {
  address: string
  /** mono postcode line, e.g. "ROZELLE NSW 2039" */
  suburb: string
  /** mono status line, e.g. "AUCTION · SAT 26 JUL" */
  status: string
  /** preformatted, e.g. "$2,395,000", plus its mono label */
  guide: string
  guideLabel: string
  /** preformatted mono spec cells, e.g. "3 BED" */
  specs: string[]
  /** preformatted open times */
  opens: string[]
  href: string
}

export interface HalloranResult {
  address: string
  suburb: string
  /** preformatted sold price; omit for a passed-in row */
  price?: string
  /** shown instead of the price when the home did not sell on the day */
  outcome?: string
  /** days on market, preformatted numeral */
  days: string
  method: string
}

export interface HalloranSuburb {
  name: string
  /** mono context line, e.g. "NSW 2041 · HOUSES" */
  context: string
  median: HalloranSuburbStat
  change: HalloranSuburbStat
  days: HalloranSuburbStat
  /** one line of local colour, swapped in with the suburb */
  colour: string
}

export interface HalloranAgent {
  name: string
  role: string
  /** the streets-I've-sold count, the agent's headline figure */
  streets: HalloranSuburbStat
  /** mono sample of sold streets */
  streetsList: string
  stats: HalloranSuburbStat[]
  patches: string[]
}

export interface HalloranFeeItem {
  label: string
  detail?: string
  /** preformatted, e.g. "$1,180" */
  value: string
}

export interface HalloranWeek {
  /** mono week stamp, e.g. "WK 0" or "+42 DAYS" */
  week: string
  title: string
  body: string
  /** at most one across the campaign, earns the key-date tag */
  milestone?: boolean
}

Frequently asked questions

How do I install the Real Estate Agency Template component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/template-real-estate`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Real Estate Agency Template require?

Real Estate Agency Template uses motion on top of React and Tailwind CSS. You don't need to install it manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Real Estate Agency Template to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Want this built for you?

CleverUI is built by the Clever Ops web team. If you'd rather ship a hand-coded, fast, custom website than assemble one, we build them for Australian businesses every week.

Explore web development services