Skip to main content
The LI.FI Widget is a drop-in React component that provides a complete swap, bridge, and Composer UI. Composer works out-of-the-box. When a user selects a vault token as the destination, the Widget automatically uses Composer to execute the deposit.

​
Zero-Code Composer

If you already have the LI.FI Widget integrated, Composer is already available to your users. No additional configuration is needed. When a user:
  1. Selects a vault token (e.g., a Morpho vault) as the destination token
  2. The Widget automatically detects this is a Composer route
  3. Displays the estimated vault tokens the user will receive
  4. Executes the full Composer flow (swap + deposit) in a single transaction

​
Basic Setup

If you haven’t integrated the Widget yet, here’s a minimal setup: 
import { LiFiWidget } from '@lifi/widget';
import type { WidgetConfig } from '@lifi/widget';

const widgetConfig: WidgetConfig = {
  integrator: 'YourAppName',
  variant: 'default',
};

export function ComposerWidget() {
  return <LiFiWidget integrator="YourAppName" config={widgetConfig} />;
}
For full Widget setup instructions, see Install Widget.

​
Configuring Composer in the Widget

​
Pre-select a Vault Token

You can pre-configure the Widget to target a specific vault token, creating a focused deposit experience: 
const widgetConfig: WidgetConfig = {
  integrator: 'YourAppName',
  toChain: 8453,                                                // Base
  toToken: '0x7BfA7C4f149E7415b73bdeDfe609237e29CBF34A',       // Morpho vault token
};
This pre-fills the destination with the Morpho vault, so users only need to select their source token and amount.

​
Lock the Destination

To create a dedicated deposit widget (e.g., “Deposit into Morpho”), lock the destination so users can’t change it: 
const widgetConfig: WidgetConfig = {
  integrator: 'YourAppName',
  toChain: 8453,
  toToken: '0x7BfA7C4f149E7415b73bdeDfe609237e29CBF34A',
  disabledUI: ['toToken', 'toAddress'],
};

​
Filter Source Chains and Tokens

Restrict which source chains or tokens are available: 
const widgetConfig: WidgetConfig = {
  integrator: 'YourAppName',
  toChain: 8453,
  toToken: '0x7BfA7C4f149E7415b73bdeDfe609237e29CBF34A',
  chains: {
    allow: [1, 10, 42161, 8453], // Only Ethereum, Optimism, Arbitrum, Base
  },
};

​
Listening for Composer Events

The Widget emits events during execution. Use these to track Composer transactions in your application: 
import { LiFiWidget } from '@lifi/widget';
import type { Route } from '@lifi/sdk';

function ComposerWidget() {
  return (
    <LiFiWidget
      integrator="YourAppName"
      config={widgetConfig}
      onRouteExecutionStarted={(route: Route) => {
        console.log('Composer execution started:', route);
      }}
      onRouteExecutionUpdated={(route: Route) => {
        console.log('Composer execution updated:', route);
      }}
      onRouteExecutionCompleted={(route: Route) => {
        console.log('Composer execution completed:', route);
        // e.g., update user's vault position in your UI
      }}
      onRouteExecutionFailed={(route: Route) => {
        console.error('Composer execution failed:', route);
      }}
    />
  );
}
For the full events reference, see Widget Events.

​
Widget Variants for Composer

The Widget supports different visual variants. For Composer use cases, consider:
VariantBest For
defaultGeneral-purpose swap/bridge/deposit widget
compactEmbedded deposit widgets with limited space
drawerSlide-out panel for deposit flows
const widgetConfig: WidgetConfig = {
  integrator: 'YourAppName',
  variant: 'compact',
  toChain: 8453,
  toToken: '0x7BfA7C4f149E7415b73bdeDfe609237e29CBF34A',
};
For all variants, see Select Widget Variants.

​
Customizing Appearance

Match the Widget to your app’s design system: 
const widgetConfig: WidgetConfig = {
  integrator: 'YourAppName',
  appearance: 'dark',
  theme: {
    palette: {
      primary: { main: '#5C67FF' },
      secondary: { main: '#fab6f4' },
    },
    shape: {
      borderRadius: 12,
      borderRadiusSecondary: 8,
    },
  },
};
For full theming options, see Customize Widget.

​
Wallet Management

The Widget can manage wallet connections internally or integrate with your existing wallet provider. See Wallet Management for details on connecting external wallet providers.

​
Try It Live

Test Composer in the Widget Playground:

Widget Playground

Interactive playground to test Composer flows with the LI.FI Widget

​
Next Steps

Widget Configuration

Full Widget configuration reference

Widget Events

All available Widget event callbacks

API Integration

Direct API integration for full control

SDK Integration

Managed execution with the TypeScript SDK