Swap Panel

A swap panel component for selecting tokens and managing swap amounts. It displays token chips, input fields, and status indicators. It allows flipping tokens and submitting swaps. Use it in trading or exchange interfaces.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/swap-panel

npx layro-cli add @educlopez/swap-panel

npx layro-cli add @educlopez/swap-panel

bunx layro-cli add @educlopez/swap-panel

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

"use client";

import SmoothButton from "@/components/smoothui/smooth-button";
import { cn } from "@/lib/utils";
import { ArrowLeftRight, ChevronDown } from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import type { ReactNode } from "react";
import { useEffect, useId, useRef, useState } from "react";

const SPRING_TRANSITION = {
  bounce: 0.1,
  duration: 0.25,
  type: "spring" as const,
};