Component

Token Swap Card

Provides a token swap interface with token inputs, slippage options, and confirmation states.

Preview

Swap tokens

1 SOL = 142.3000 USDC

You pay

You receive

0.00

Slippage: 0.5%

Fee: ~0.000005 SOL

Installation

terminal

$npx shadcn@latest add https://uxdotsol.xyz/r/token-swap.json

Usage

token-swap.tsx

import { TokenSwap } from "@/components/token-swap";
 
export default function App() {
  return (
    <div className="flex justify-center p-8">
      <TokenSwap />
    </div>
  );
}

Props / Arguments

Name	Type	Default	Description
tokens	Token[]	DEFAULT_TOKENS	List of tokens available for selection in the dropdowns.
defaultFrom	Token	tokens[0]	Pre-selected pay-side token.
defaultTo	Token	tokens[1]	Pre-selected receive-side token.
slippageOptions	number[]	[0.1, 0.5, 1.0]	Available slippage tolerance options shown as pills (in percent).
rateLabel	string	undefined	Static exchange rate label used when USD prices are unavailable.
networkFee	string	'~0.000005 SOL'	Network fee string shown in the card footer.
onSwap	(from: Token, to: Token, amount: string) => void	undefined	Callback fired after the swap animation completes. Use this to trigger the real transaction.
className	string	''	Optional Tailwind / CSS class forwarded to the card root element.