Currency Converter

An interactive currency converter and token swap card with real-time exchange rates, NumberFlow spring animations, Space UI Select with flags, and a liquid metal squircle button.

15.6 KB
•
Updated on September 28, 2026
Active on Canvas Stage

Installation

Bash
pnpm dlx shadcn@latest add @spaceui/components-spaceui-interactions-currency-converter

Usage

Code
import { CurrencyConverter } from '@/components/interactions/currency-converter'
Code
<CurrencyConverter />

API Reference

CurrencyConverter Props

PropTypeDefaultDescription
initialFromCurrency
string
USDInitial currency code for sending
initialToCurrency
string
EURInitial currency code for receiving
initialAmount
number
100Initial numerical amount to convert
currencies
Currency[]
DEFAULT_CURRENCIESCustom array of available currency rates and metadata
onConvert
(details: CurrencyConvertDetails) => void
-Callback triggered when the convert action button is pressed
className
string
-Additional class name applied to outer Frame container

Related Components

Agent PipelineInteraction

An interactive multi-agent pipeline visualization with real-time physics, event logs, and playback controls.

View
Agent Usage CardInteraction

An interactive agent status and usage card with segmented progress tracking, live telemetry hours advancement, morph icon controls, squircle buttons, squishmoji status avatar, and a collapsible cost breakdown.

View
Deploy PipelineInteraction

A self-playing deploy pipeline that advances on its own, pauses on hover, and reveals per-step detail — drop it in to turn a static log into a living status feed.

View
Status Badge Glow
pnpm dlx shadcn@latest add @spaceui/components-spaceui-interactions-currency-converter