Install Widget

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

yarn add @lifi/widget

pnpm add @lifi/widget

bun add @lifi/widget

npm install @lifi/widget

Compatibility

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

• React 18+

• Vue 3 (Example)

• Svelte (Example)

• Vite (Example)

• Create React App (Example)

• Next.js (Compatibility with Next.js, Remix, Nuxt, etc., example)

• Nuxt.js (Example)

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