## Currency Swap (S—050)

Send and receive panels with a flip button; the converted amount rolls into place.

- URL: https://sundaeui.dev/components/currency-swap
- Category: Checkout & payments · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/currency-swap.json`
- Tags: swap, exchange, checkout, input, currency, fintech

Type an amount and the other side converts as you type. The swap button turns half a circle and flips the pair, carrying the converted amount over.
Rates are passed in, so it works for fiat transfers, wallets or points.

### Usage

```tsx
import { CurrencySwap } from '@/components/sundae/currency-swap'

<CurrencySwap
  from={{ code: 'USD', flag: '🇺🇸', rate: 1 }}
  to={{ code: 'EUR', flag: '🇪🇺', rate: 1.08 }}
/>
```

### Props

- `from / to` (`Currency`, required): Code, flag and value in a shared base.
- `defaultAmount` (`number`, default `250`): Starting amount.
- `stroke` (`boolean`, default `true`): Hairline borders.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Transfer, exchange and wallet screens.

### When not to use

- Showing live market rates without a source: pass real rates and show when they were fetched.

### Accessibility

- The amount is a labelled input with inputMode="decimal".
- The converted amount is an <output> announced politely.
- The swap button names the result ("Swap to send EUR").

### Keyboard

- Tab: Amount → swap button
- Enter / Space: Swap the pair