LI.FI Documentation
LI.FI WebsiteAPI ReferenceHelp / FAQ / Create support ticketRequest API Key
  • 🏡Getting Started
    • ❓What is LI.FI
    • 🌟Why LI.FI?
    • 🆚LI.FI vs Aggregators/DEXs/Bridges
    • 📖LI.FI Terminology
    • ❓FAQ
    • 💡Use Cases
      • Mobile/Gaming Wallets
    • 🏹LI.FI vs. Other Aggregators
    • 🤝Partnership
    • 🌐Powered by LI.FI
  • 🔐Security First
  • ✅List: Chains, Bridges, DEX Aggregators, Solvers
  • 💲Monetization / Take Fees
  • 🔎Transaction Explorer
  • 🔏Rate Limits & API Key
  • How to get integrated by LI.FI?
    • For Bridges
    • For DEXs/Aggregators/Solvers
  • 🆘Technical FAQ
  • LI.FI PRODUCTS
    • Glacis
    • LI.FI Solver
    • LI.FI Intents System
  • LI.FI API
    • ⚙️LI.FI API
      • Transferring Tokens (Example)
      • Requesting supported Chains
      • Requesting all supported Tools
      • Requesting all known Tokens
      • Getting Token Information
      • Getting all possible Connections
      • Requesting a Quote
        • Token Transfer
        • Optimizing quote response timing
        • Cross-Chain Contract Calls
        • Possible Tool Errors
        • Testing your integration
      • Status of a Transaction
      • Requesting Analytics Data
    • ⚔️TX-Batching aka "Zaps"
    • 🏄Solana
      • Request examples
    • 🪙Bitcoin
      • Request examples
    • ⛽LI.Fuel
  • Integrate LI.FI SDK
    • 🚀LI.FI SDK Overview
    • 📦Install LI.FI SDK
    • ⚙️Configure SDK
    • 🪐Configure SDK Providers
    • 📜Request Routes/Quotes
    • 🎯Execute Routes/Quotes
    • ⛓️Chains and Tools
    • 💰Token Management
    • 🕵️Testing Integration
    • 🚗Migrate from v2 to v3
  • INTEGRATE LI.FI WIDGET
    • 🧩LI.FI Widget Overview
    • 📦Install Widget
    • 🎮Select Widget Variants
    • ⚙️Configure Widget
    • 🎨Customize Widget
    • ⚡Widget Events
    • 👛Wallet Management
    • 🌍Internationalization
    • ⚛️Compatibility with Next.js, Remix, Nuxt, etc.
    • 🛣️React Router Compatibility
    • 📖Widget API Reference
    • 🚗Migrate from v2 to v3
  • Smart Contracts
    • Overview
    • Deployments/Contract Addresses
    • Audits
  • Support & Misc.
    • API Status
    • Technical Help Desk & FAQ
    • Create a Partner Ticket
    • Discord Support
    • Telegram Support
    • Twitter
    • Github
    • Licenses
Powered by GitBook
LogoLogo

Connect with us

  • Github
  • Twitter
  • Discord
  • LinkedIn

More Information

  • Help Desk / FAQ
  • API Reference
  • Website
On this page
  • Compatibility
  • Basic example

Was this helpful?

Export as PDF
  1. INTEGRATE LI.FI WIDGET

Install Widget

Easy installation to go multi-chain

Last updated 5 months ago

Was this helpful?

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

pnpm add @lifi/widget wagmi @bigmi/react @solana/wallet-adapter-react @tanstack/react-query
yarn add @lifi/widget wagmi @bigmi/react @solana/wallet-adapter-react @tanstack/react-query
bun add @lifi/widget wagmi @bigmi/react @solana/wallet-adapter-react @tanstack/react-query
npm install @lifi/widget wagmi @bigmi/react @solana/wallet-adapter-react @tanstack/react-query
  • is type safe, extensible, and modular library for building Ethereum apps.

  • is modular TypeScript library that provides reactive primitives for building Bitcoin applications.

  • is modular TypeScript wallet adapters and components for Solana applications.

  • is an async state manager that handles requests, caching, and more.

Compatibility

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

  • React 18+

  • Vite ()

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

  • Remix ()

  • Vue 3 ()

  • Svelte ()

  • Nuxt.js ()

  • Gatsby ()

  • RainbowKit ()

See the compatibility pages for more information.

Basic example

Here is a basic example using LI.FI Widget with container customization.

The integrator option is required and should contain the identifier of the integrator of the widget. Usually, it's your dApp/company name.

As an integrator, you can monetize your LI.FI SDK integration and collect fees. Please see Monetization / Take Fees for more information.

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

Check out our complete examples in the or if you have any incompatibilities.

Check out our to play with customization options in real time.

📦
Wagmi
Bigmi
@solana/wallet-adapter-react
TanStack Query
Example
example
Example
Example
Example
Example
Example
Example
widget repository
file an issue
LI.FI Playground
🎮Select Widget Variants