LI.FI Widget is a set of prebuilt UI components for secure cross-chain bridging and swapping. The widget can be customized to match your web app's design and helps drive your multi-chain strategy by attracting users from all ecosystems.
LI.FI Widget features include:
- Provider-based architecture - Modular blockchain support with separate packages for Ethereum, Bitcoin, Solana, Sui, and Tron
- All ecosystems, chains, bridges, exchanges, and solvers that LI.FI supports
- Embeddable variants - compact, wide, and drawer
- Options to allow or deny certain chains, tokens, bridges, and exchanges
- Pre-configured themes and lots of customization options with dark mode support so you can match the look and feel of your web app
- Built-in wallet management UI with support for external wallet providers (Wagmi, Bigmi, Wallet Standard, @mysten/dapp-kit-react, and TronWallet Adapters)
- Supports widely adopted industry standards, including EIP-5792, ERC-2612, EIP-712, EIP-6963, and Permit2
- View of transactions in progress and transaction history
- Curated wallet lists and wallet bookmarks
- Route settings for advanced users (stored locally)
- Complete UI translations to match your customer's preferred language
- Compatibility tested with React, Next.js, Vue, Nuxt.js, Svelte, Remix, Vite, RainbowKit, Reown AppKit, Privy, Dynamic
LI.FI Widget is available as an npm package. The widget uses a provider-based architecture, allowing you to choose which blockchains to support.
Core package:
pnpm:
pnpm add @lifi/widget @tanstack/react-querynpm:
npm install @lifi/widget @tanstack/react-queryyarn:
yarn add @lifi/widget @tanstack/react-queryInstall the provider packages for the blockchains you want to support:
Ethereum/EVM chains:
pnpm:
pnpm add @lifi/widget-provider-ethereum wagmi @wagmi/corenpm:
npm install @lifi/widget-provider-ethereum wagmi @wagmi/coreyarn:
yarn add @lifi/widget-provider-ethereum wagmi @wagmi/coreBitcoin:
pnpm:
pnpm add @lifi/widget-provider-bitcoin @bigmi/reactnpm:
npm install @lifi/widget-provider-bitcoin @bigmi/reactyarn:
yarn add @lifi/widget-provider-bitcoin @bigmi/reactSolana:
pnpm:
pnpm add @lifi/widget-provider-solana bs58npm:
npm install @lifi/widget-provider-solana bs58yarn:
yarn add @lifi/widget-provider-solana bs58Sui:
pnpm:
pnpm add @lifi/widget-provider-sui @mysten/dapp-kit-reactnpm:
npm install @lifi/widget-provider-sui @mysten/dapp-kit-reactyarn:
yarn add @lifi/widget-provider-sui @mysten/dapp-kit-reactTron:
pnpm:
pnpm add @lifi/widget-provider-tron @tronweb3/tronwallet-adapter-react-hooksnpm:
npm install @lifi/widget-provider-tron @tronweb3/tronwallet-adapter-react-hooksyarn:
yarn add @lifi/widget-provider-tron @tronweb3/tronwallet-adapter-react-hooksNote: You only need to install the provider packages for the blockchains you want to support. Each provider package includes its required peer dependencies.
LI.FI Wallet Management is available as an npm package and provides wallet management UI components.
pnpm:
pnpm add @lifi/wallet-managementnpm:
npm install @lifi/wallet-managementyarn:
yarn add @lifi/wallet-managementLI.FI Widget Light is available as an npm package and provides a lightweight, iframe-based integration. Your app manages wallets while the widget runs in a sandboxed iframe.
pnpm:
pnpm add @lifi/widget-lightnpm:
npm install @lifi/widget-lightyarn:
yarn add @lifi/widget-lightEcosystem handlers are available as subpath imports (@lifi/widget-light/ethereum, @lifi/widget-light/solana, @lifi/widget-light/bitcoin, @lifi/widget-light/sui, @lifi/widget-light/tron) — install the corresponding peer dependencies only for the chains you need. See the widget-light integration guide for full setup instructions.
The LI.FI Widget uses a provider-based architecture that allows you to selectively enable support for different blockchains:
@lifi/widget- Core widget package with UI components and functionality@lifi/widget-provider- Base provider package with shared types and utilities@lifi/widget-provider-ethereum- Ethereum/EVM chains support (requires Wagmi)@lifi/widget-provider-bitcoin- Bitcoin support (requires Bigmi)@lifi/widget-provider-solana- Solana support (requires bs58)@lifi/widget-provider-sui- Sui support (requires @mysten/dapp-kit-react)@lifi/widget-provider-tron- Tron support (requires @tronweb3/tronwallet-adapter-react-hooks)@lifi/wallet-management- Wallet management UI components@lifi/widget-light- Lightweight iframe-based integration (docs)
This architecture provides:
- Modularity: Only install and bundle what you need
- Flexibility: Mix and match blockchain support
- Extensibility: Easy to add support for new blockchains
- Tree-shaking: Unused providers are automatically excluded from your bundle
Here is an example of a basic app using LI.FI Widget with Ethereum support:
import { LiFiWidget, WidgetConfig } from '@lifi/widget';
import { EthereumProvider } from '@lifi/widget-provider-ethereum';
const widgetConfig: WidgetConfig = {
providers: [
EthereumProvider(),
],
theme: {
container: {
border: '1px solid rgb(234, 234, 234)',
borderRadius: '16px',
},
},
};
export const WidgetPage = () => {
return (
<LiFiWidget integrator="Your dApp/company name" config={widgetConfig} />
);
};Multi-chain example (Ethereum, Solana, Bitcoin, Sui, and Tron):
import { LiFiWidget, WidgetConfig } from '@lifi/widget';
import { BitcoinProvider } from '@lifi/widget-provider-bitcoin';
import { EthereumProvider } from '@lifi/widget-provider-ethereum';
import { SolanaProvider } from '@lifi/widget-provider-solana';
import { SuiProvider } from '@lifi/widget-provider-sui';
import { TronProvider } from '@lifi/widget-provider-tron';
const widgetConfig: WidgetConfig = {
providers: [
EthereumProvider(),
SolanaProvider(),
BitcoinProvider(),
SuiProvider(),
TronProvider(),
],
theme: {
container: {
border: '1px solid rgb(234, 234, 234)',
borderRadius: '16px',
},
},
};
export const WidgetPage = () => {
return (
<LiFiWidget integrator="Your dApp/company name" config={widgetConfig} />
);
};Please refer to our documentation if you encounter any issues with importing.
You can also refer to the examples folder in this repository to see how to import the widget in your specific context.
Visit our playground to see how you can customize your LI.FI Widget experience. Additionally, see examples folder in this repository.
Please visit LI.FI Widget Documentation.
We appreciate your interest in helping translate our project!
If you'd like to contribute translations, please visit our Crowdin project page at Crowdin LI.FI Widget. Register on Crowdin and you can start translating the project into your preferred language. Your contributions will help make our project accessible to a wider audience around the world.
Thank you for your support!
The changelog is regularly updated to reflect what's changed in each new release.