Appraisal CTA Panel

Installation

pnpm dlx shadcn@latest add @cleverui/appraisal-cta-panel

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

Usage

tsx

import { AppraisalCtaPanel } from '@/components/blocks/appraisal-cta-panel'

Exampletsx

import { AppraisalCtaPanel } from '@/components/blocks/appraisal-cta-panel'

export default function AppraisalCtaPanelDemo() {
  return (
    <div className="mx-auto max-w-3xl px-4 py-10 sm:px-6 sm:py-14">
      <AppraisalCtaPanel
        eyebrow="Free market appraisal"
        heading="What's your place worth?"
        subheading="A written appraisal from the team that sells your street, no obligation, no hard sell."
        placeholder="Enter your street address"
        ctaLabel="Get your appraisal"
        onSubmit={() => {}}
        proofLine="27 homes appraised in Kew this quarter · median guide $2.41m"
        agents={[
          { name: 'Claire Whitmore', jobTitle: 'Principal' },
          { name: 'James Okonkwo', jobTitle: 'Senior sales' },
          { name: 'Maya Chen', jobTitle: 'Buyer specialist' },
        ]}
        privacyNote="No obligation. Your details stay with us."
      />
    </div>
  )
}

API reference

AppraisalCtaPanel accepts the following props.

Prop	Type	Default	Description
`heading`	`string`	`"What's your place worth?"`	–
`eyebrow`	`string`	–	quiet sans kicker, e.g. Free market appraisal
`subheading`	`string`	–	one supporting sentence
`placeholder`	`string`	`'Enter your street address'`	–
`ctaLabel`	`string`	`'Get your appraisal'`	–
`onSubmit`	`(address: string) => void`	–	Address field is an affordance only, submit prevents default and hands the entered address to the callback; no network in the component.
`proofLine`	`string`	–	recent-sales proof with figures preformatted
`agents`	`AppraisalAgent[]`	–	2–3 agents for the trust row, deterministic-initial discs
`privacyNote`	`string`	–	small reassurance line

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

Referenced types

Typestsx

export interface AppraisalAgent {
  name: string
  jobTitle?: string
}

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.

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.

Property Compare Table

Shortlisted homes side by side in React, addresses head the columns, prices in large tabular figures, ruled attribute rows with em-dash gaps, Tailwind tokens throughout.

Frequently asked questions

How do I install the Appraisal CTA Panel component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/appraisal-cta-panel`. 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 Appraisal CTA Panel require?

Appraisal CTA Panel 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 Appraisal CTA Panel 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