Card installment choices (parcelas) with per-installment amounts, interest terms and totals, in list, tiles and compact variants.
"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>
);
}Part of Uai — browse the full library on 21st.dev.