Skip to main content
To get started, install the latest version of LI.FI Widget along with the required peer dependencies.

​
Installation

​
Core Widget Package

yarn add @lifi/widget @tanstack/react-query

​
With Blockchain Providers

For full multi-chain support including Ethereum, Solana, Bitcoin, Sui, and Tron, install the widget with all provider packages and their peer dependencies: 
yarn add @lifi/widget @lifi/widget-provider-ethereum @lifi/widget-provider-solana @lifi/widget-provider-bitcoin @lifi/widget-provider-sui @lifi/widget-provider-tron wagmi @wagmi/core @bigmi/react bs58 @mysten/dapp-kit-react @tronweb3/tronwallet-adapter-react-hooks @tanstack/react-query

​
Dependencies Explained

​
Core Dependencies

  • TanStack Query - Async state manager that handles requests, caching, and more. Required peer dependency.

​
Blockchain Provider Packages

These are optional packages that enable support for different blockchain ecosystems:
  • @lifi/widget-provider-ethereum - Ethereum/EVM chain support
  • @lifi/widget-provider-solana - Solana chain support
    • Peer dependency: bs58 >=4.0.1
  • @lifi/widget-provider-bitcoin - Bitcoin chain support
  • @lifi/widget-provider-sui - Sui chain support
  • @lifi/widget-provider-tron - Tron chain support
Polyfill Requirements: If you need to support older browsers, you’ll need to install and configure polyfills. See the Polyfill Requirements documentation for details.

​
Compatibility

The widget is compatible with React 18+ / React 19 and works with various frameworks and wallet libraries including Next.js, Remix, Vue, Nuxt.js, Svelte, RainbowKit, ConnectKit, Privy, and more. See the Compatibility page for framework-specific setup guides and code examples. Check out our complete examples in the widget repository or file an issue if you have any incompatibilities.

​
Basic Example

The widget is written in TypeScript and all configuration options are fully typed. 
import { LiFiWidget, WidgetConfig } from '@lifi/widget';

const widgetConfig: WidgetConfig = {
  theme: {
    container: {
      border: '1px solid rgb(234, 234, 234)',
      borderRadius: '16px',
    },
  },
};

export const WidgetPage = () => {
  return <LiFiWidget integrator="Your dApp/company name" config={widgetConfig} />;
};

​
Example with Blockchain Providers

For multi-chain support, configure the widget with blockchain providers: 
import { LiFiWidget, WidgetConfig } from '@lifi/widget';
import { EthereumProvider } from '@lifi/widget-provider-ethereum';
import { SolanaProvider } from '@lifi/widget-provider-solana';
import { BitcoinProvider } from '@lifi/widget-provider-bitcoin';
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} />;
};