Installment Picker

Component

About

Card installment choices (parcelas) with per-installment amounts, interest terms and totals, in list, tiles and compact variants.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Installment Picker to your project and fits it to your theme.

Code

How Installment Picker is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import {
  formatBrl,
  InstallmentPicker,
  InstallmentPickerAmount,
  InstallmentPickerCount,
  InstallmentPickerLegend,
  InstallmentPickerOption,
  InstallmentPickerOptions,
  InstallmentPickerTerms,
} from "@/components/ui/installment-picker";

const price = 1299;
const monthlyRate = 0.0199;

function installment(count: number) {
  if (count <= 10) return { each: price / count, total: price, interestFree: true };
  const each = (price * monthlyRate) / (1 - (1 + monthlyRate) ** -count);
  return { each, total: each * count, interestFree: false };
}

export default function InstallmentPickerDemo() {
  return (
    <div className="flex min-h-[360px] w-full items-center justify-center p-6">
      <div className="w-full max-w-[420px]">
        <InstallmentPicker variant="list" name="parcelas" defaultValue="3">
          <InstallmentPickerLegend>Parcelamento no cartão</InstallmentPickerLegend>
          <InstallmentPickerOptions>
            <InstallmentPickerOption value="1">
              <InstallmentPickerCount>1x</InstallmentPickerCount>
              <InstallmentPickerAmount>{formatBrl(price * 0.95)}</InstallmentPickerAmount>
              <InstallmentPickerTerms interestFree>5% off à vista</InstallmentPickerTerms>
            </InstallmentPickerOption>
            {[3, 6, 10, 12].map((count) => {
              const { each, total, interestFree } = installment(count);
              return (
                <InstallmentPickerOption key={count} value={String(count)}>
                  <InstallmentPickerCount>{count}x</InstallmentPickerCount>
                  <InstallmentPickerAmount>{formatBrl(each)}</InstallmentPickerAmount>
                  <InstallmentPickerTerms interestFree={interestFree}>
                    {interestFree ? "sem juros" : `total ${formatBrl(total)}`}
                  </InstallmentPickerTerms>
                </InstallmentPickerOption>
              );
            })}
          </InstallmentPickerOptions>
        </InstallmentPicker>
      </div>
    </div>
  );
}