# Currency Converter

> An animated currency converter for React and shadcn, with a live rate, a swap button and a fee breakdown.

Two amounts and the live rate between them: press swap and the arrow turns while the amounts cross-roll into each other's place. The rate ticks with a trend line, and the fee breakdown unfolds on Auto Height.

- Tier: Eased Pro
- Interaction: Type
- Page: https://eased.dev/components/currency-converter
- Installs: motion, @base-ui/react

## Install

Currency Converter ships with Eased Pro (https://eased.dev/#pricing). Members add the `@eased-pro` registry with their token (https://eased.dev/account), then run:

```bash
npx shadcn add @eased-pro/currency-converter
```

Two amounts and the live rate between them, with a fee breakdown.

```tsx
import { CurrencyConverter } from "@/components/eased/currency-converter/currency-converter";

<CurrencyConverter
  rates={{ USD: 1, EUR: 1.0842, GBP: 1.2718, JPY: 0.006695 }}
  defaultFrom="EUR"
  defaultTo="USD"
  defaultAmount={2500}
  arrives="Mon, Oct 19"
  action={<Button variant="primary" className="w-full">Convert</Button>}
/>
```

## Props

| Prop | Type | Default | |
|---|---|---|---|
| `rates` | `Record<string, number>` | | Each currency's value in one common base. New values tick the rate. |
| `currencies` | `string[]` | keys of `rates` | Menu order. |
| `history` | `Record<string, number[]>` | | Recent values in the same base, for the rate trend. |
| `from` / `defaultFrom`, `to` / `defaultTo`, `onCurrenciesChange` | | | Controlled or not. |
| `amount` / `defaultAmount`, `onAmountChange` | `number` | `1000` | The amount sent. |
| `feeRate` / `minFee` | `number` | `0.0035` / `0` | Fee as a share, and its floor. |
| `arrives` | `ReactNode` | | Shown in the breakdown. |
| `sendHint` | `(from) => ReactNode` | | E.g. the balance of the send account. |
| `action` | `ReactNode` | | The call to action, pinned to the bottom. |
| `defaultFeesOpen` | `boolean` | `false` | Start with the fee breakdown open. |
| `locale` | `string` | runtime | |

Currency pickers are Base UI Select on the overlay-core listbox (keyboard, typeahead, gliding highlight). Picking the other side's currency swaps them.

**Motion signature:** swap turns the arrow half a circle on the snappy spring while the two amounts cross-roll into each other's place; the rate rolls on every tick and its trend morphs; the fees unfold on Auto Height. Typing never animates. Reduced motion: no rolls, no turn.