Rate Comparison Sheet

Installation

pnpm dlx shadcn@latest add @cleverui/rate-comparison-sheet

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

Usage

tsx

import { RateComparisonSheet } from '@/components/blocks/rate-comparison-sheet'

Exampletsx

'use client'

import { RateComparisonSheet } from '@/components/blocks/rate-comparison-sheet'

export default function RateComparisonSheetDemo() {
  return (
    <RateComparisonSheet
      eyebrow="Home loans"
      heading="Compare our rates"
      intro="Every rate below is current as at 1 July 2026 and shown beside its comparison rate."
      products={[
        {
          name: 'Variable Rate Home Loan',
          summary:
            'A flexible owner-occupier loan with offset and redraw. Rate moves with the market.',
          rate: '5.99%',
          comparisonRate: '6.08%',
          features: ['Offset', 'Redraw', 'No annual fee'],
          cta: { label: 'Apply', href: '#variable' },
        },
        {
          name: 'Fixed Rate Home Loan',
          summary:
            'Lock your rate for three years. Extra repayments limited during the fixed term.',
          rate: '5.69%',
          comparisonRate: '6.21%',
          features: ['3-year fixed', 'Portable', 'Split available'],
          cta: { label: 'Apply', href: '#fixed' },
          emphasized: true,
        },
        {
          name: 'Investment Variable',
          summary:
            'For residential investment properties. Interest-only options available subject to criteria.',
          rate: '6.19%',
          comparisonRate: '6.28%',
          features: ['Interest-only option', 'Redraw', 'Online redraw'],
          cta: { label: 'Apply', href: '#investment' },
        },
      ]}
      disclosure="Comparison rates are based on a $150,000 loan over 25 years. WARNING: This comparison rate is true only for the example given and may not include all fees and charges. Different terms or amounts may result in a different comparison rate."
    />
  )
}

API reference

RateComparisonSheet accepts the following props.

Prop	Type	Default	Description
`eyebrow`	`string`	`'Home loans'`	quiet sans micro-label, sober, never a colored pill
`heading`	`string`	`'Compare our rates'`	–
`intro`	`string`	–	one plain sentence
`rateLabel`	`string`	`'Interest rate p.a.'`	–
`comparisonRateLabel`	`string`	`'Comparison rate p.a.'`	–
`products`*	`RateComparisonProduct[]`	–	–
`emphasisLabel`	`string`	`'Most chosen'`	real-text label on the emphasized row
`disclosure`	`string`	`'Comparison rates are based on a $150,000 loan over 25 years. WARNING: This comparison rate is true only for the example given and may not include all fees and charges. Different terms or amounts may result in a different comparison rate.'`	statutory warning as genuine full-size copy

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

Referenced types

Typestsx

export interface RateComparisonProduct {
  name: string
  summary?: string
  /** PREFORMATTED, e.g. '5.89%', never computed */
  rate: string
  /** PREFORMATTED comparison rate, never computed */
  comparisonRate: string
  features?: string[]
  cta?: { label: string; href: string }
  /** at most one emphasized: true */
  emphasized?: boolean
}

Related components

Coverage Explainer Panel

An insurance coverage disclosure panel in React, inclusions with preformatted limits, exclusions at equal weight, a plain excess line and a PDS note. Tailwind, no fine-print burial.

Loan Eligibility Steps

Loan eligibility and application steps in React, plain criteria up front, numbered stages with document notes and honest preformatted timeframes in Tailwind. No approval hype.

Advisor Credentials Rows

A financial adviser directory of sober hairline rows, credentials, mono licence numbers, specialty runs and an AFSL disclosure line as the accent. React and Tailwind, zero hype.

Ledger Accordion

A standalone accordion in the ruled-ledger voice, mono indices, right-aligned mono meta figures, hairline rows, and a primary keyline beside the open region. A content container, not a FAQ.

Which Appointment Should I Book?

Consult types compared in plain language, length and fee in quiet figures, an honest best-for line each, and a calm not-sure fallback. A React and Tailwind decision aid for clinics.

FAQ Disclosure List

The accordion FAQ perfected, real disclosure semantics over hairline rows, mono two-digit numbering earned by most-asked order, multi-paragraph answers, optional single-open.

Frequently asked questions

How do I install the Rate Comparison 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/rate-comparison-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 Rate Comparison Sheet require?

Rate Comparison 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 Rate Comparison 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