Auction Results Strip

Installation

pnpm dlx shadcn@latest add @cleverui/auction-results-strip

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

Usage

tsx

import { AuctionResultsStrip } from '@/components/blocks/auction-results-strip'

Exampletsx

import { AuctionResultsStrip } from '@/components/blocks/auction-results-strip'

export default function AuctionResultsStripDemo() {
  return (
    <div className="w-full py-6 sm:py-10">
      <AuctionResultsStrip
        heading="Auction results"
        weekendLabel="Weekend of 12–13 July"
        clearance={71}
        clearanceLabel="Clearance rate"
        summary="48 scheduled · 41 sold"
        results={[
          {
            address: '14 Banksia Avenue',
            suburb: 'Kew',
            result: 'sold',
            price: '$2,420,000',
            method: 'Auction',
          },
          {
            address: '3/22 Cotham Road',
            suburb: 'Kew',
            result: 'sold',
            price: '$1,185,000',
            method: 'Prior',
          },
          {
            address: '8 Belmont Avenue',
            suburb: 'Balwyn',
            result: 'passed-in',
            method: 'Auction',
          },
          {
            address: '41 High Street North',
            suburb: 'Kew',
            result: 'sold',
            price: '$3,010,000',
            method: 'Auction',
          },
          {
            address: '19 Carson Street',
            suburb: 'Kew',
            result: 'withdrawn',
            method: 'Auction',
          },
          {
            address: '6 Adeney Avenue',
            suburb: 'Kew',
            result: 'sold',
            price: '$2,765,000',
            method: 'Auction',
          },
        ]}
        note="Agency reported · collected Sunday 6pm"
      />
    </div>
  )
}

API reference

AuctionResultsStrip accepts the following props.

Prop	Type	Default	Description
`heading`	`string`	`'Auction results'`	–
`weekendLabel`	`string`	–	preformatted date line, never derived from Date in render
`clearance`*	`number`	–	clearance percentage, e.g. 71
`clearanceLabel`	`string`	`'Clearance rate'`	–
`summary`	`string`	–	preformatted totals line, e.g. 48 scheduled · 41 sold
`results`*	`AuctionResultRow[]`	–	–
`note`	`string`	–	provenance footnote

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

Referenced types

Typestsx

export interface AuctionResultRow {
  address: string
  suburb?: string
  result: AuctionResultKind
  /** preformatted, e.g. $1,420,000 */
  price?: string
  /** e.g. Auction or Prior */
  method?: string
}

export type AuctionResultKind = 'sold' | 'passed-in' | 'withdrawn'

Related components

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.

Suburb Report Card

A suburb market snapshot, median price counting up in big tabular figures, a 12-month delta chip, ruled days-on-market and clearance rows, and a mono data-as-of provenance note.

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.

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.

Open Home Schedule

A week of inspections set like a printed schedule, days as ruled groups, each open home with its address, a tabular time range, and an add-to-calendar affordance via callback.

Frequently asked questions

How do I install the Auction Results Strip component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/auction-results-strip`. 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 Auction Results Strip require?

Auction Results Strip 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 Auction Results Strip 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