sidiora-labs

Swap

Component

About

A multi-chain token swap widget with an amount field, flip-direction control, live quote (rate, fee, slippage, ETA), optional send-to-address, and a searchable token picker sheet.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Swap to your project and fits it to your theme.

Code

How Swap is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { MultiChainSwap } from "@/components/ui/swap";

export function SwapPreview() {
  return (
    <div className="flex w-full items-center justify-center">
      <MultiChainSwap />
    </div>
  );
}

export default SwapPreview;

Dependencies

More by sidiora-labs

View all
  • Preview Rail

    Preview Rail

    2
  • Expandable Tabs

    Expandable Tabs

    1
  • Morphing Modal

    Morphing Modal

    1
  • Not Found

    Not Found

  • Text Cascade

    Text Cascade

  • Smooth Scroll

    Smooth Scroll

  • Motion Breadcrumb

    Motion Breadcrumb

  • Wallet Card

    Wallet Card