Tuition Payment Options

Installation

pnpm dlx shadcn@latest add @cleverui/tuition-payment-options

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

Usage

tsx

import { TuitionPaymentOptions } from '@/components/blocks/tuition-payment-options'

Exampletsx

import { TuitionPaymentOptions } from '@/components/blocks/tuition-payment-options'

export default function TuitionPaymentOptionsDemo() {
  return (
    <div className="mx-auto w-full">
      <TuitionPaymentOptions
        heading="Ways to pay"
        intro="Same course, same certificate, pick the payment rhythm that fits your life."
        options={[
          {
            name: 'Pay in full',
            price: '$4,950',
            cadence: 'one payment before week one',
            total: '$4,950 total',
            bestFor:
              'Best if you have savings set aside and want the lowest overall cost.',
            ctaLabel: 'Pay in full',
            href: '#pay-full',
          },
          {
            name: 'Monthly',
            price: '$450',
            cadence: 'per month for 12 months',
            total: '$5,400 total',
            bestFor:
              'Best if you want a predictable monthly amount while you study and start interviewing.',
            recommended: true,
            ctaLabel: 'Choose monthly',
            href: '#monthly',
          },
          {
            name: 'Deferred',
            price: '$0',
            cadence: 'due until you earn $55k+',
            total: '$5,900 total after placement',
            bestFor:
              'Best if cash is tight now and you are confident about a post-course role.',
            ctaLabel: 'Apply for deferred',
            href: '#deferred',
          },
        ]}
        includes={[
          'All course materials and project briefs',
          'Lifetime alumni community',
          '1:1 career coaching through demo day',
          'Certificate on completion',
        ]}
        finePrint="Full refund within the first 14 days, no questions asked."
      />
    </div>
  )
}

API reference

TuitionPaymentOptions accepts the following props.

Prop	Type	Default	Description
`heading`	`string`	`'Ways to pay'`	–
`intro`	`string`	–	one encouraging plain sentence under the heading
`options`*	`TuitionPaymentOption[]`	–	–
`includes`	`string[]`	–	shared once below the grid, never repeated per card
`includesLabel`	`string`	`'Every option includes'`	–
`ctaLabel`	`string`	`'Choose this plan'`	fallback CTA label when an option omits its own
`finePrint`	`string`	–	plain-language footnote sentence

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

Referenced types

Typestsx

export interface TuitionPaymentOption {
  name: string
  /** preformatted, e.g. '$450' */
  price: string
  /** plain line, e.g. 'per month for 12 months' */
  cadence?: string
  /** preformatted, e.g. '$5,400 total' */
  total?: string
  /** one honest sentence */
  bestFor?: string
  recommended?: boolean
  ctaLabel?: string
  href?: string
}

Related components

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.

Alumni Story Cards

Graduate stories told as career arcs, from old job to new title, a short quote, cohort chip, and hired-in timeline. React and Tailwind alumni proof cards for course sites.

Cohort Countdown Strip

An enrolment-closing strip, seats left, a preformatted close date, and a compact rolling countdown pointing at one warm CTA. Encouraging urgency, not a fire alarm.

Course Card Grid

Friendly course cards with level chips, duration and next-cohort lines, outcome checklists, and one warm enrol CTA per card, the encouraging way a training site earns sign-ups.

Curriculum Outline

A module-by-module curriculum accordion, week markers, lesson counts, and honest 'what you'll build' notes behind real disclosure semantics. A syllabus students can trust.

Parents FAQ

The questions parents and skeptics actually ask, accreditation, refunds, job outcomes, answered plainly behind real disclosure semantics, with a talk-to-a-human fallback.

Frequently asked questions

How do I install the Tuition Payment Options component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/tuition-payment-options`. 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 Tuition Payment Options require?

Tuition Payment Options 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 Tuition Payment Options 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