2️⃣Select Widget Variants

Customize your experience with our versatile variants

LI.FI Widget comes in three variants - default, expandable, 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 nft. They help to customize the interior look and feel as well as functionality.

Variants

The default variant 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.

The expandable variant provides a more comprehensive overview of available routes, displayed in a sidebar with slick animation.

The drawer variant can fit nicely on the page's side and has the same layout as the default one.

Default

Expandable

Drawer

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 default, expandable, or drawer
  variant: 'expandable',
};

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

Subvariants

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 nft subvariant offers a completely new look allowing you to show NFT components and giving you a toolkit to build a complete NFT Checkout flow.

Split

NFT Checkout

To use one of the subvariants, set the subvariant option in the configuration.

The nft subvariant is currently in BETA. While we've worked hard to ensure its stability and functionality, there might still be some rough edges.

If you are interested in integrating NFT Checkout, please reach out via our Discord or Partnership page.

import { LiFiWidget, WidgetConfig } from '@lifi/widget';

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

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