fetaUI
GitHub

Currency Transfer

A money transfer and its steps: recipient, amount, and a timeline that ticks in sequence.

FreeWeb and MobileMotion

Preview

npx shadcn add @fetaui/currency-transfer
Playground

Lena Fischer

Harbor Bank ••7823

In progress

€460.00

500.00 USD sent · 460.00 EUR received

  1. Payment received: DoneFrom Meridian ••4589
  2. Converted to EUR: Done1 USD = 0.9200 EUR
  3. Arriving: In progressUsually within a minute
TXN-DAB3UL494Rate locked 10:45 AM
Processing

Lena Fischer

Harbor Bank ••7823

In progress

€460.00

500.00 USD sent · 460.00 EUR received

  1. Payment received: DoneFrom Meridian ••4589
  2. Converted to EUR: Done1 USD = 0.9200 EUR
  3. Arriving: In progressUsually within a minute
TXN-DAB3UL494Rate locked 10:45 AM
Completed

Lena Fischer

Harbor Bank ••7823

Arrived

€460.00

500.00 USD sent · 460.00 EUR received

  1. Payment received: DoneFrom Meridian ••4589
  2. Converted to EUR: Done1 USD = 0.9200 EUR
  3. Arrived: DoneLena Fischer can use it now
TXN-DAB3UL494Rate locked 10:45 AM
Failed, Retry restarts the last step

Lena Fischer

Harbor Bank ••7823

Failed

€460.00

500.00 USD sent · 460.00 EUR received

  1. Payment received: DoneFrom Meridian ••4589
  2. Converted to EUR: Done1 USD = 0.9200 EUR
  3. Couldn’t complete: FailedRefunded to Meridian ••4589
TXN-DAB3UL494Rate locked 10:45 AM
Live

Lena Fischer

Harbor Bank ••7823

In progress

€460.00

500.00 USD sent · 460.00 EUR received

  1. Payment received: In progressFrom Meridian ••4589
  2. Converted to EUR: Waiting1 USD = 0.9200 EUR
  3. Arriving: WaitingUsually within a minute
TXN-DAB3UL494Rate locked 10:45 AM
Status
Icons animation
Motion

Installation

Terminal· bash
 npx shadcn add @fetaui/currency-transfer

Accessibility

  • The timeline is an ordered list, and each step says its state in text.
  • The status Badge is a polite live region.
  • Failure has a label and a mark, never colour alone.

Motion

  • A finished step pops its tick and the line fills down in 300 ms.
  • A failure pops the danger mark and fades the amount to 40% in 240 ms.
  • The spinner on the active step stops when motion is off.
  • With reduced motion, marks swap in place.

Responsive behavior

  • 384 px on Web and 358 px on Mobile.
  • The footer action stays compact, because the reference shares its row.

Performance

  • A step redraws only its own mark, and the line fills with scaleY on the compositor.
  • The copy timer is cleared on unmount and on each new copy.
  • The footer mounts only the action the status needs.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Import CurrencyTransfer from @/components/fetaui/currency-transfer and pass recipient, amount, summary, reference and steps.
  • The component holds no progress. Drive status and done from your server: done is the count of finished steps.
  • amount and summary are display strings, so format and convert them yourself.
  • onReceipt and onRetry are yours to wire, and the demo only simulates progress with a timer. Composes Card, Avatar, Badge, Button and Spinner.
/docs/components/currency-transfer/markdown
PreviousCard Stack
NextLightbox Grid

Related

Receipt PrinterComponentA receipt that feeds out of a slot line by line, hangs, and tears off on a pull.Order TrackingComponentStage and ETA, a five stage track, a timeline of updates, the items and the address.Payment MethodComponentA saved card: brand tile, label and expiry, status and a menu. Add is a dashed row.Card FieldComponentA card payment in one field. Pay stays disabled until number, expiry and code are all valid.Amount PadComponentA send money keypad. The amount grows as you type and the send button carries it.