Loan Eligibility Steps

Installation

pnpm dlx shadcn@latest add @cleverui/loan-eligibility-steps

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

Usage

tsx

import { LoanEligibilitySteps } from '@/components/blocks/loan-eligibility-steps'

Exampletsx

'use client'

import { LoanEligibilitySteps } from '@/components/blocks/loan-eligibility-steps'

export default function LoanEligibilityStepsDemo() {
  return (
    <LoanEligibilitySteps
      eyebrow="Applying"
      heading="How applying works"
      intro="Most applicants know where they stand within one business day."
      criteriaTitle="Before you apply"
      criteria={[
        '18 or over and an Australian resident or citizen',
        'A regular income, PAYG, self-employed, or pension',
        'Able to service the loan after living expenses and existing debts',
        'Clear ID and proof of income you can produce on request',
      ]}
      steps={[
        {
          title: 'Check your eligibility',
          description:
            'Answer a few questions about income, expenses, and the loan you have in mind. We give you a soft indication only, nothing is recorded against your credit file.',
          documents: 'Recent payslips or tax returns if self-employed',
          timeframe: 'Same day',
        },
        {
          title: 'Submit your application',
          description:
            'Complete the full application online or with an adviser. We verify identity, income, and the purpose of the loan before any formal assessment begins.',
          documents: 'Two recent payslips and 90 days of bank statements',
          timeframe: 'Days 1–2',
        },
        {
          title: 'Assessment',
          description:
            'A credit decision is made against our lending criteria. We may ask for clarifying documents; we will not keep you waiting without an update.',
          documents: 'Any extra statements or employment letters we request',
          timeframe: 'Days 2–5',
        },
        {
          title: 'Offer and settlement',
          description:
            'If approved, you receive a written offer with rates, fees, and conditions. Once you accept and we finalise security, funds are released on the agreed date.',
          documents: 'Signed offer, ID, and any security documents',
          timeframe: 'Days 5–14',
        },
      ]}
      note="Approval is subject to our lending criteria. If we can't proceed, we'll tell you promptly and explain exactly why."
    />
  )
}

API reference

LoanEligibilitySteps accepts the following props.

Prop	Type	Default	Description
`eyebrow`	`string`	`'Applying'`	quiet sans micro-label, sober, never a colored pill
`heading`	`string`	`'How applying works'`	–
`intro`	`string`	–	one plain sentence
`criteriaTitle`	`string`	`'Before you apply'`	–
`criteria`*	`string[]`	–	plain eligibility lines, unnumbered; order carries no meaning
`steps`*	`LoanEligibilityStage[]`	–	ordered stages
`documentsLabel`	`string`	`"What you'll need"`	micro-label set before each stage's documents line
`note`	`string`	`"Approval is subject to our lending criteria. If we can't proceed, we'll tell you promptly and explain exactly why."`	closing line, honest terms in place of instant-approval hype

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

Referenced types

Typestsx

export interface LoanEligibilityStage {
  title: string
  description: string
  /** practical line, e.g. 'Two recent payslips and 90 days of bank statements' */
  documents?: string
  /** PREFORMATTED, e.g. 'Same day' or 'Days 2–5' */
  timeframe?: string
}

Related components

Rate Comparison Sheet

Home loan rate comparison rows in React, advertised and comparison rates paired in tabular numerals with the statutory warning as first-class Tailwind copy. Disclosure-forward, zero urgency.

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.

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.

Admission Checklist

What you need to get in and what you can skip, admission requirements as an encouraging two-group checklist with real dl semantics. React and Tailwind block for course sites.

How Booking Works

How booking works in three or four numbered steps, plain reassuring language, near-still motion, and practical notes like bring your Medicare card. Calm from first click to consult.

Next Steps CTA

Closing CTA that shows what happens after the click, a three-step runway with honest mono timing chips ahead of the ask. Trust-first React and Tailwind conversion section.

Frequently asked questions

How do I install the Loan Eligibility Steps component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/loan-eligibility-steps`. 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 Loan Eligibility Steps require?

Loan Eligibility Steps 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 Loan Eligibility Steps 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