Install Widget

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

yarn add @lifi/widget wagmi @bigmi/react @solana/wallet-adapter-react @mysten/dapp-kit @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.

@mysten/dapp-kit provides React tools for wallet integration and data access in Sui blockchain dApps.

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+ (Example)

• 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.

​

Basic example

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

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