Currency converter

Things to tryCopy Anchor Link

• Type what you send. What they get rolls with it, at today's rate.
• Change a currency. Tap either currency and the card turns into a list of every currency, with a search at the top. Type a code or a name (try "ced"), then pick one with a click or Enter. Picking the currency already on the other side swaps them.
• Swap. The two currencies trade places and the swap button turns.
• Press Send. It turns into Sending, then Sent, and goes back.

InstallCopy Anchor Link

npx shadcn@latest add https://your-docs-site/r/currency-converter.json

DependenciesCopy Anchor Link

The install command adds these for you. If you copy the code by hand, install them yourself.

npm install @base-ui/react @hugeicons/core-free-icons @hugeicons/react motion

How it worksCopy Anchor Link

• Real data, nothing made up. The rates come from ExchangeRate-API's free endpoint, fetched once and shared by every converter on the page. Currency names come from the browser's Intl.DisplayNames, decimal places from Intl.NumberFormat, and each flag is built from the country letters at the start of the currency's code. While the rates load the card says so, and if they can't be reached it offers to try again.
• One tray that springs. The card animates its real height to whichever face is showing and clips what's inside, so its edge bounces while text never stretches.
• The label and pill travel. "You send" and the currency pill fly up to become the list's header (layoutId), blurring slightly on the way; the pill turns into the close button.
• Everything else scales in place. The other parts wait at 94% size, blurred and transparent, and spring in with the rows a beat behind each other. Leaving is quicker than arriving. Pressing a pill grows it a little.
• Built on Base UI. Autocomplete handles the search, the keyboard and the list; Escape or the pill closes it and focus returns to where you were.
• Motion does every animation: the tray, the travelling header, the rows, the rolling digits and Send's label.