Selling Process Timeline

Installation

pnpm dlx shadcn@latest add @cleverui/selling-process-timeline

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

Usage

tsx

import { SellingProcessTimeline } from '@/components/blocks/selling-process-timeline'

Exampletsx

'use client'

import { SellingProcessTimeline } from '@/components/blocks/selling-process-timeline'

export default function SellingProcessTimelineDemo() {
  return (
    <SellingProcessTimeline
      eyebrow="The campaign, start to finish"
      heading="How your sale runs"
      intro="Six weeks, one plan, no surprises, from appraisal to keys changing hands."
      milestoneLabel="The big day"
      ctaLabel="Book a listing consult"
      href="#listing-consult"
      note="Timings typical for an auction campaign, private sales run to their own clock."
      steps={[
        {
          title: 'Appraisal and pricing strategy',
          description:
            'On-site appraisal, comparable sales, and a clear price band agreed before a single photograph is taken.',
          timeframe: 'Weeks 1–2',
        },
        {
          title: 'Campaign launch',
          description:
            'Photography, floorplan, copy, and portal live. Signboard up, buyer database notified, open-home calendar set.',
          timeframe: 'Week 3',
        },
        {
          title: 'Open homes and buyer feedback',
          description:
            'Weekly inspections, written buyer notes after each open, and mid-campaign adjustments if interest softens.',
          timeframe: 'Weeks 3–5',
        },
        {
          title: 'Auction day',
          description:
            'On-site auction with pre-qualified bidders. Reserve agreed the morning of, you remain in control until the hammer falls.',
          timeframe: 'Auction day',
          milestone: true,
        },
        {
          title: 'Contract and settlement',
          description:
            'Contracts exchanged, deposit held in trust, and settlement managed with your conveyancer through to handover.',
          timeframe: '+30–90 days',
        },
      ]}
    />
  )
}

API reference

SellingProcessTimeline accepts the following props.

Prop	Type	Default	Description
`heading`	`string`	`'How your sale runs'`	–
`eyebrow`	`string`	–	quiet sans kicker, e.g. The campaign, start to finish
`intro`	`string`	–	one supporting sentence
`steps`*	`SellingProcessStep[]`	–	–
`milestoneLabel`	`string`	`'The big day'`	–
`ctaLabel`	`string`	`'Book a listing consult'`	–
`href`	`string`	–	CTA as anchor when set
`onStart`	`() => void`	–	CTA as button when set and href is absent; hidden when both absent
`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 SellingProcessStep {
  title: string
  description: string
  /** preformatted timeframe, Weeks 1–2, Auction day, +30–90 days */
  timeframe: string
  /** at most one step, primary keyline + milestoneLabel */
  milestone?: boolean
}

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.

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.

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 Selling Process Timeline component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/selling-process-timeline`. 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 Selling Process Timeline require?

Selling Process Timeline 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 Selling Process Timeline 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