CD-06CardsUpdated, October 16, 2026
Currency Transfer
Transfer tracker that converts the amount in place, walks through each step on a filling rail and ends with a copyable reference.
Usage
With no props the card runs a demo: the payment is taken, converted, sent and arrives on its own. Pass status to drive it from your own transfer state. While status is "processing" the steps run up to the last one and wait there.
<CurrencyTransfer
from={{ amount: 1200, currency: "GBP", symbol: "£", bank: "Monzo", last4: "1180" }}
to={{ amount: 1404, currency: "USD", symbol: "$", bank: "Chase", last4: "4589", name: "Sam Carter" }}
rate={1.17}
txnId="TXN-8F2K19QZ"
timestamp="2:30 PM"
status={state}
onRetry={retry}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
from | TransferAccount | 500.00 USD, Chase ••4589 | Sending account and amount. |
to | TransferAccount | 460.00 EUR, Lena Fischer, Deutsche Bank ••7823 | Receiving account and amount. |
rate | number | 0.92 | Units of to.currency per one from.currency. |
txnId | string | "TXN-DAB3UL494" | Reference shown in the footer, with a copy button. |
timestamp | string | "10:45 AM" | When the rate was locked. |
status | "processing" | "completed" | "failed" | — | Controlled status. Omit it for the self-running demo. |
locale | string | "en-US" | BCP 47 locale for amounts, currency symbols and the rate. |
onRetry | () => void | — | Shows a Retry button on the step that failed. |
className | string | — | Extra classes for the card. |
TransferAccount is { amount: number; currency: string; symbol?: string; bank: string; last4?: string; name?: string }. The receiving name labels the card and its initials avatar. Status changes are announced to screen readers, and with reduced motion the digits, rail and ticks jump to their state.
PROOnboarding Checklist and more like it are in Kokonut UI Pro
Installation
Currency Transfer is a free, open-source React component in the Kokonut UI Cards collection. Add it with the shadcn CLI, which copies the source into components/kokonutui/currency-transfer.tsx, so the code is yours to change.
npx shadcn@latest add @kokonutui/currency-transferDependencies
Built with React, Tailwind CSS and lucide-react.
