Currency Swap
Send and receive panels with a flip button; the converted amount rolls into place.
currency-swap.tsxcurrency-swap.css
Checking access…
Overview
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.
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.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/currency-swap.json$
npx shadcn@latest add https://sundaeui.dev/r/currency-swap.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/currency-swap.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/currency-swap.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy currency-swap.tsx and currency-swap.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { CurrencySwap } from '@/components/sundae/currency-swap'
<CurrencySwap
from={{ code: 'USD', flag: '🇺🇸', rate: 1 }}
to={{ code: 'EUR', flag: '🇪🇺', rate: 1.08 }}
/>Props
| Prop | Type | Default |
|---|---|---|
from / to*Code, flag and value in a shared base. | Currency | — |
defaultAmountStarting amount. | number | 250 |
strokeHairline borders. | boolean | true |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
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").
Customization
- Every colour is a CSS custom property on the root class; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
Keyboard
- Tab
- Amount → swap button
- Enter / Space
- Swap the pair
FAQ
- Is Currency Swap free?
- Currency Swap is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Currency Swap?
- Run npx shadcn@latest add https://sundaeui.dev/r/currency-swap.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Currency Swap support keyboard and screen readers?
- The amount is a labelled input with inputMode="decimal". The converted amount is an <output> announced politely.
- Does Currency Swap respect reduced motion?
- Yes. With prefers-reduced-motion set, decorative motion is removed and state changes are instant.
More like this
All checkout →- Pro
Tender Checkout
Checkout · Refined Coupon Field
Checkout · Refined- Pro
Tip Selector
Checkout · Refined - Pro
Payment Methods
Checkout · Refined - Pro
Gift Card
Checkout · Refined - Pro
Seat Checkout
Checkout · Understated