Swap Card

Beta

Get Ritla UI

Convert between currencies or assets: You send and You get, a swap button between them, the fee and one main button.

Open in Figma

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

Add the component
$ npx ritla add swap-card
Also works with shadcn: npx shadcn@latest add @ritla/swap-card
Dependencies it brings
@phosphor-icons/react
Or copy by hand
Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

Usage

swap-card.tsx

import { SwapCard } from "@/components/ui/swap-card";<SwapCard  send={{ label: "You send", amount, onAmountChange: setAmount, currency: { code: "JOD", country: "JO" } }}  receive={{ label: "You get", amount: converted, currency: { code: "USD", country: "US" } }}  onSwap={swap}  labels={{ swap: "Swap currencies", changeCurrency: "Change currency" }}  action={<Button className="w-full">Review</Button>}/>

API reference

SwapCard

Prop	Type	Default	Description
`send / receive`	`SwapField`	None	Each side: label, amount, onAmountChange (leave it out for read only), currency, onCurrencyClick, caption.
`onSwap`	`() => void`	None	Swaps the two sides.
`labels`	`{ swap, changeCurrency }`	None	Button names in the page language.
`details`	`{ label, value }[]`	None	Fee, arrival time…
`action`	`ReactNode`	None	The one main button.

Accessibility

ARIA

Each amount is a labelled input with its caption as description; the converted side is read only.
The swap button sits between the fields in the tab order too.

Arabic and RTL notes

Mirrors

The amount is on the right and the currency pill on the left.

Does not mirror

The swap arrows point up and down and never mirror.

Numerals: Amounts can be typed in Latin or Arabic-Indic digits; read them with parseAmount from @/lib/money.
Arabic typography: numeric-24 Semibold amounts.