Transfer Composer

Forms

About

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.

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

Code

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

Usage.tsx

"use client";
import { TransferComposer } from "@/components/ui/transfer-composer";
import { useRef } from "react";

export default function TransferComposerDemo() {
  const sends = useRef(0);
  return (
    <div className="flex min-h-full w-full justify-center px-4 py-10 bg-[#0b0b0c]">
      <div className="w-full max-w-[34rem]">
        <TransferComposer
          theme="dark"
          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>
  );
}