Property Compare Table

Installation

pnpm dlx shadcn@latest add @cleverui/property-compare-table

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

Usage

tsx

import { PropertyCompareTable } from '@/components/blocks/property-compare-table'

Exampletsx

import { PropertyCompareTable } from '@/components/blocks/property-compare-table'

export default function PropertyCompareTableDemo() {
  return (
    <PropertyCompareTable
      eyebrow="Compare before Saturday"
      heading="Your shortlist, side by side"
      highlight={1}
      highlightLabel="Front runner"
      note="Figures from agent statements, verify with contract of sale before offer."
      properties={[
        {
          address: '14 Banksia Avenue',
          suburb: 'Hawthorn East',
          price: '$1,285,000',
          href: '#banksia',
        },
        {
          address: '9 Marshall Avenue',
          suburb: 'Kew',
          price: 'Guide $1.35m',
          href: '#marshall',
        },
        {
          address: '41 Berkeley Street',
          suburb: 'Hawthorn',
          price: '$1,190,000',
          href: '#berkeley',
        },
      ]}
      rows={[
        { label: 'Bedrooms', values: ['3', '4', '3'] },
        { label: 'Bathrooms', values: ['2', '2', '1'] },
        { label: 'Car spaces', values: ['2', '2', '1'] },
        { label: 'Land', values: ['545 m²', '612 m²', '418 m²'] },
        { label: 'Floor area', values: ['168 m²', '192 m²', ''] },
        { label: 'Days on market', values: ['18', '9', '27'] },
        { label: 'Auction', values: ['Sat 26 Jul', 'Sat 2 Aug', ''] },
        {
          label: 'Open this weekend',
          values: ['Sat 10:00', 'Sat 11:15', 'Sun 12:30'],
        },
      ]}
    />
  )
}

API reference

PropertyCompareTable accepts the following props.

Prop	Type	Default	Description
`heading`	`string`	`'Your shortlist, side by side'`	–
`eyebrow`	`string`	–	quiet sans kicker, e.g. Compare before Saturday
`properties`*	`CompareProperty[]`	–	–
`rows`*	`CompareRow[]`	–	–
`highlight`	`number`	–	index of the featured column, single primary accent
`highlightLabel`	`string`	`'Front runner'`	–
`regionLabel`	`string`	`'Property comparison'`	aria-label for the focusable scroll region
`note`	`string`	–	–

…plus everything from Omit< React.HTMLAttributes<HTMLElement>, 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onAnimationStart' >: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx

export interface CompareProperty {
  address: string
  suburb?: string
  /** preformatted price, $1,285,000 or Guide $1.1m */
  price: string
  href?: string
}

export interface CompareRow {
  label: string
  /** values aligned to properties order; empty string → em dash */
  values: string[]
}

Related components

Listing Gallery Strip

A horizontal snap-scroll rail of listing cards with hairline edge fades and a keyboard-focusable scroll region, how a boutique agency presents this week's properties.

Agent Profile Card

An agent card that sells with proof, portrait placeholder, sold count and median days-on-market ticking up in tabular figures, suburbs served as chips, and an appraisal CTA.

Appraisal CTA Panel

The what's-your-place-worth conversion block, a single address field with a callback-only submit, a recent-sales proof line in tabular figures, and an agent trust row.

Auction Results Strip

Last weekend's auction results as a ruled band, a clearance rate counting up once, then sold and passed-in rows with addresses leading and prices set in tabular figures.

Commission Breakdown Sheet

Agent fees in full view, commission rate as the hero figure, itemised campaign costs in a ruled Tailwind ledger, and a payable-at-settlement note. React transparency block.

Off-Market Teaser

A coming-soon listing teaser in React, suburb leads while the address stays withheld behind a redaction bar, with a launch date line and a register-interest CTA. Tailwind tokens.

Frequently asked questions

How do I install the Property Compare Table component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/property-compare-table`. 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 Property Compare Table require?

Property Compare Table 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 Property Compare Table 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.

Preview & code