LI.FI Widget comes in three variants - compact, wide, and drawer. Variants allow customization of the exterior of the widget, like the side panel for quotes or drawer. There are also several subvariants - default, split, and custom. They help to customize the interior look and feel as well as functionality.

​
Variants

Variants provide a way to optimize the presentational style of the Widget for the space available in your application.
Check out our LI.FI Playground to play with variants.
To use one of the variants, set the variant option in the configuration. 
import { LiFiWidget, WidgetConfig } from '@lifi/widget';

const widgetConfig: WidgetConfig = {
  // It can be either compact, wide, or drawer
  variant: 'wide',
};

export const WidgetPage = () => {
  return (
    <LiFiWidget integrator="Your dApp/company name" config={widgetConfig} />
  );
};

​
Compact variant

The compact variant is a great choice when you have limited space on a page or are dealing with smaller screen sizes. It has everything you need to bridge and swap in a compact view and allows you to integrate the widget wherever you want on your web app’s page. Compact variant

​
Wide variant

The wide variant allows you to take advantage of bigger page and screen sizes where you might have more available screen real estate and provides a more comprehensive overview of available routes, displayed in a sidebar with slick animation. Wide variant

​
Drawer variant

The drawer variant allows you to show or hide the Widget based on user interaction. It can fit nicely on the page’s side and has the same layout as the compact variant. Drawer variant

​
How do we control the drawer?

The drawer doesn’t have a pre-built button to open and close it. To control the drawer you need to create and assign a ref to the widget. Here is an example of controlling the drawer with ref: 
export const WidgetPage = () => {
  const drawerRef = useRef<WidgetDrawer>(null);

  const toggleWidget = () => {
    drawerRef.current?.toggleDrawer();
  };

  return (
    <div>
      <button onClick={toggleWidget}>Open LI.FI Widget</button>
      <LiFiWidget
        ref={drawerRef}
        config={{
          variant: 'drawer',
        }}
        integrator="drawer-example"
      />
    </div>
  );
}

​
Subvariants

Subvariants allow you to present different workflows for your users. The default subvariant has the same functionality to bridge and swap in a compact view. The split subvariant separates mental models and has slightly different views for bridging and swapping experiences with neat tabs on the main page. The custom subvariant offers a totally new look, allowing you to show custom components like the NFT one and giving you a toolkit to build complete new flows, including NFT Checkout and Deposit.
default-subvariant

Default subvariant

nft_checkout

Custom subvariant (NFT Checkout)

See Split subvariant options for configuration details of split subvariant. To use one of the subvariants, set the subvariant option in the configuration. 
import { LiFiWidget, WidgetConfig } from '@lifi/widget';

const widgetConfig: WidgetConfig = {
  // It can be either compact, wide, or drawer
  variant: 'wide',
  // It can be either default, split, or custom
  subvariant: 'split',
};

export const WidgetPage = () => {
  return (
    <LiFiWidget integrator="Your dApp/company name" config={widgetConfig} />
  );
};

​
Enabling the chain sidebar

If you’re using the wide variant and want to have a chain sidebar instead of the compact chain selector, set enableChainSidebar to true in subvariantOptions: 
subvariantOptions: {
  wide: {
    enableChainSidebar: true,
  }
}
chain-sidebar

enableChainSidebar: true

compact-chain-selector

enableChainSidebar: false

The chain sidebar in the wide variant is disabled by default.

​
Split subvariant options

For subvariant: 'split', the subvariantOptions configuration controls whether to show both “Swap” and “Bridge” tabs or a single interface.
  • Default (no options): Shows both “Bridge” and “Swap” tabs
  • split: 'bridge': Shows only bridge interface (no tabs)
  • split: 'swap': Shows only swap interface (no tabs)
import { LiFiWidget, WidgetConfig } from '@lifi/widget';

// Default - shows tabs
const widgetConfig: WidgetConfig = {
  subvariant: 'split',
};

// Pure bridge interface
const bridgeConfig: WidgetConfig = {
  subvariant: 'split',
  subvariantOptions: {
    split: 'bridge'
  }
};

// Pure swap interface
const swapConfig: WidgetConfig = {
  subvariant: 'split',
  subvariantOptions: {
    split: 'swap'
  }
};
split-subvariant

Split subvariant (Default)

swap-subvariant

Split subvariant (Swap option)