Getting Started
Install the widget via npm or yarn.
npm install --save @lifi/widget
yarn add @lifi/widget


  • React v18+


List of environments we've tested the widget with so far:
See the compatibility pages for more information. Also, check out our complete examples in the widget repository here and file an issue if you have any incompatibilities here.

Basic example

Here is an example of a basic app using LI.FI Widget.
The integrator option should contain the identifier of the integrator of the widget. It's optional, and we will use the web app hostname if it isn't provided.
import { LiFiWidget, WidgetConfig } from '@lifi/widget';
import { useMemo } from 'react';
export const WidgetPage = () => {
const widgetConfig: WidgetConfig = useMemo(() => ({
integrator: 'Your dApp/company name',
containerStyle: {
border: `1px solid ${
window.matchMedia('(prefers-color-scheme: dark)').matches
? 'rgb(66, 66, 66)'
: 'rgb(234, 234, 234)'
borderRadius: '16px',
display: 'flex',
}), []);
return <LiFiWidget config={widgetConfig} />;
Copy link
Basic example