A multi-step money-transfer form that walks a user through entering an amount and recipient, reviewing the fee and business-day arrival date, and viewing a success receipt with a reference number.
"use client";
import { TransferComposer } from "@/components/ui/transfer-composer";
import { useRef } from "react";
export default function TransferComposerLightDemo() {
const sends = useRef(0);
return (
<div className="flex min-h-full w-full justify-center px-4 py-10 bg-[#f6f6f7]">
<div className="w-full max-w-[34rem]">
<TransferComposer
theme="light"
locale="en-US"
today="2026-10-05"
accounts={[
{ id: "op", name: "Operating", last4: "2210", balance: 8_421_055 },
{
id: "tax",
name: "Tax reserve",
last4: "8834",
balance: 1_260_000,
},
]}
recipients={[
{
id: "q",
name: "Qalam Studio LLC",
bank: "Ruwi Savings",
last4: "5521",
},
{
id: "l",
name: "Layla Al-Harthy",
bank: "Gulf Coast Bank",
last4: "0937",
},
]}
onSend={() =>
new Promise((resolve, reject) =>
setTimeout(
() =>
++sends.current === 1
? reject(
new Error(
"The receiving bank didn't answer in time. Nothing left your account; try again.",
),
)
: resolve({
reference: `TRF-${String(48213 + sends.current)}`,
}),
900,
),
)
}
/>
</div>
</div>
);
}
