Commission Breakdown Sheet

Installation

pnpm dlx shadcn@latest add @cleverui/commission-breakdown-sheet

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

Usage

tsx

import { CommissionBreakdownSheet } from '@/components/blocks/commission-breakdown-sheet'

Exampletsx

import { CommissionBreakdownSheet } from '@/components/blocks/commission-breakdown-sheet'

export default function CommissionBreakdownSheetDemo() {
  return (
    <div className="mx-auto max-w-2xl px-4 py-10 sm:px-6 sm:py-14">
      <CommissionBreakdownSheet
        eyebrow="No surprises at settlement"
        heading="Our fee, in full"
        commissionRate="2.2% + GST"
        commissionNote="Payable only when your property sells, nothing upfront."
        items={[
          {
            label: 'Photography and floorplan',
            value: '$780',
            detail: 'Twilight package · 25 stills + measured plan',
          },
          {
            label: 'Copywriting and brochure',
            value: '$420',
            detail: 'Listing copy, A4 brochure, digital flyer',
          },
          {
            label: 'Portal and print advertising',
            value: '$1,850',
            detail: 'Domain Premium + local paper campaign',
          },
          {
            label: 'Signboard and open-home staffing',
            value: '$640',
            detail: 'Installed board · six open homes',
          },
          {
            label: 'Auctioneer',
            value: '$430',
            detail: 'On-site auctioneer fee',
          },
        ]}
        totalLabel="Total marketing"
        totalValue="$4,120"
        inclusions={[
          'Auctioneer coordination',
          'Contract of sale liaison',
          'Buyer qualification',
          'Settlement follow-through',
        ]}
        note="Marketing at cost, supplier invoices available on request. Commission exclusive of GST."
      />
    </div>
  )
}

API reference

CommissionBreakdownSheet accepts the following props.

Prop	Type	Default	Description
`heading`	`string`	`'Our fee, in full'`	–
`eyebrow`	`string`	–	quiet sans kicker, e.g. No surprises at settlement
`commissionRate`*	`string`	–	preformatted rate hero, e.g. 2.2% + GST
`commissionNote`	`string`	–	one qualifying sentence under the rate
`items`*	`CommissionItem[]`	–	–
`totalLabel`	`string`	`'Total marketing'`	–
`totalValue`*	`string`	–	preformatted campaign total, e.g. $4,120
`inclusions`	`string[]`	–	what the commission itself covers, hairline chips
`note`	`string`	–	footnote

…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 CommissionItem {
  label: string
  value: string
  /** small clarifying line under the label */
  detail?: 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.

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.

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 Commission Breakdown Sheet component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/commission-breakdown-sheet`. 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 Commission Breakdown Sheet require?

Commission Breakdown Sheet 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 Commission Breakdown Sheet 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