Installation
pnpm dlx shadcn add @eased-pro/currency-converternpx shadcn add @eased-pro/currency-converteryarn dlx shadcn add @eased-pro/currency-converterbunx --bun shadcn add @eased-pro/currency-converterNeeds the @eased-pro registry and your Pro token in components.json. Create a token and copy the setup from your account .
Install the dependencies
pnpm add motion @base-ui/reactnpm install motion @base-ui/reactyarn add motion @base-ui/reactbun add motion @base-ui/reactAdd the Eased pieces it builds on
Copy each item’s files the same way, or install them with the CLI:
Add the files
- components/eased/currency-converter/currency-converter.tsx
Source is included with Eased Pro. Members download the files with the CLI command above, or through the MCP server.
Keep the folder layout
The files import each other by relative path (
../lib/motion), so keep each one at the path shown, undercomponents/eased/.
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.