Install Widget

Easy installation to go multi-chain

To get started, install the latest version of LI.FI Widget and required packages.

pnpm add @lifi/widget wagmi @bigmi/react @solana/wallet-adapter-react @tanstack/react-query

yarn add @lifi/widget wagmi @bigmi/react @solana/wallet-adapter-react @tanstack/react-query

bun add @lifi/widget wagmi @bigmi/react @solana/wallet-adapter-react @tanstack/react-query

npm install @lifi/widget wagmi @bigmi/react @solana/wallet-adapter-react @tanstack/react-query

Wagmi is type safe, extensible, and modular library for building Ethereum apps.
Bigmi is modular TypeScript library that provides reactive primitives for building Bitcoin applications.
@solana/wallet-adapter-react is modular TypeScript wallet adapters and components for Solana applications.
TanStack Query is an async state manager that handles requests, caching, and more.

Compatibility

List of environments, libraries and frameworks we've tested the widget with so far:

React 18+
Vite (Example)
Next.js (Compatibility with Next.js, Remix, Nuxt, etc., example)
Remix (Example)
Vue 3 (Example)
Svelte (Example)
Nuxt.js (Example)
Gatsby (Example)
RainbowKit (Example)

See the compatibility pages for more information.

Check out our complete examples in the widget repository or file an issue if you have any incompatibilities.

Check out our LI.FI Playground to play with customization options in real time.

Basic example

Here is a basic example using LI.FI Widget with container customization.

The integrator option is required and should contain the identifier of the integrator of the widget. Usually, it's your dApp/company name.

As an integrator, you can monetize your LI.FI SDK integration and collect fees. Please see Monetization / Take Fees for more information.

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} />
  );
};

Last updated 2 months ago

Was this helpful?

Compatibility

List of environments, libraries and frameworks we've tested the widget with so far:

See the compatibility pages for more information.

Check out our complete examples in the widget repository or file an issue if you have any incompatibilities.

Check out our LI.FI Playground to play with customization options in real time.

Basic example

Here is a basic example using LI.FI Widget with container customization.

The integrator option is required and should contain the identifier of the integrator of the widget. Usually, it's your dApp/company name.

As an integrator, you can monetize your LI.FI SDK integration and collect fees. Please see Monetization / Take Fees for more information.

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} />
  );
};

🎮Select Widget Variants