Skip to main content
LI.FI Widget is a set of prebuilt UI components for integrating cross-chain bridging and swapping into your web app. It supports all ecosystems, chains, bridges, exchanges, and solvers that LI.FI offers — styled to match your design.

Widget Playground

Explore the Widget interactively — configure and preview changes in real time
LI.FI Widget features include:
  • Embeddable variants (compact, wide, drawer) and modes (split, custom, refuel)
  • Modular provider architecture — install only the ecosystems you need (Ethereum, Solana, Bitcoin, Sui, Tron) built on industry-standard libraries (Viem, Wagmi, Bigmi, Wallet Standard, TronWallet Adapters)
  • Theming, dark mode, and full CSS customization
  • Built-in wallet management with opt-out support for your own wallet solution
  • Allow/deny filtering for chains, tokens, bridges, and exchanges
  • Gasless/relayer routes, route priority settings, and slippage controls
  • Static and dynamic fee configuration for monetization
  • Complete UI translations (17 languages)
  • Industry standards support: EIP-7702, EIP-5792, ERC-2612, EIP-712, Permit2
  • Compatibility tested with React, Next.js, Vue, Nuxt.js, Svelte, Remix, Vite, RainbowKit, Reown AppKit, Privy, Dynamic, ConnectKit
Composer works automatically in the Widget. When users select a vault or staking token as their destination, Composer handles the deposit seamlessly. See the Widget Composer Integration Guide.

​
How to integrate the Widget

1

Install the Widget

Follow the installation guide.
2

Select a layout

Configure your widget layout.
3

Configure the Widget

Set chains, tokens, fees, and route options in your widget config.
4

Add blockchain providers

Install provider packages for the ecosystems you need.
5

Customize the theme

Match your app’s look and feel with theme customization.