Off-Market Teaser

Installation

pnpm dlx shadcn@latest add @cleverui/off-market-teaser

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

Usage

tsx

import { OffMarketTeaser } from '@/components/ui/off-market-teaser'

Exampletsx

'use client'

import { OffMarketTeaser } from '@/components/ui/off-market-teaser'

export default function OffMarketTeaserDemo() {
  return (
    <div className="mx-auto flex max-w-sm justify-center px-4 py-10 sm:px-6 sm:py-14">
      <OffMarketTeaser
        suburb="Kew East"
        propertyType="Four-bedroom period home · North-facing block"
        status="coming-soon"
        priceGuide="Guide $1.4m–$1.5m"
        beds={4}
        baths={2}
        cars={2}
        landSize="610 m²"
        launchLabel="Launching Thursday 24 Jul"
        addressNote="Full address released on enquiry"
        ctaLabel="Register interest"
        onRegister={() => {
          console.info('Register interest, Kew East')
        }}
      />
    </div>
  )
}

API reference

OffMarketTeaser accepts the following props.

Prop	Type	Default	Description
`suburb`*	`string`	–	suburb heading, address is withheld
`propertyType`	`string`	–	line under the suburb, e.g. Four-bedroom period home · North-facing block
`status`	`OffMarketStatus`	`'coming-soon'`	–
`priceGuide`	`string`	–	preformatted guide; omit to show enquireLabel
`enquireLabel`	`string`	`'Price on enquiry'`	–
`beds`	`number`	–	–
`baths`	`number`	–	–
`cars`	`number`	–	–
`landSize`	`string`	–	preformatted area, e.g. 610 m²
`launchLabel`	`string`	–	preformatted launch line, never derived from Date in render
`addressNote`	`string`	`'Full address released on enquiry'`	–
`ctaLabel`	`string`	`'Register interest'`	–
`href`	`string`	–	CTA as anchor when set
`onRegister`	`() => void`	–	CTA as button when set and href is absent

…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 type OffMarketStatus = 'coming-soon' | 'off-market'

Related components

Property Feature Sheet

The listing's spec sheet set like a printed document, land and floor areas, orientation, and zoning in ruled two-column rows beside a structural floorplan placeholder panel.

Property Listing Card

The listing card done right, status ribbon over a structural image panel, price in large tabular figures, a beds-baths-cars icon row, and the address doing the talking as the heading.

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.

Frequently asked questions

How do I install the Off-Market Teaser component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/off-market-teaser`. 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 Off-Market Teaser require?

Off-Market Teaser uses motion and lucide-react on top of React and Tailwind CSS. You don't need to install them manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Off-Market Teaser 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