> ## Documentation Index
> Fetch the complete documentation index at: https://docs.li.fi/llms.txt
> Use this file to discover all available pages before exploring further.

# LI.FI Widget Overview

> Cross-chain and on-chain swap and bridging UI toolkit

LI.FI Widget is a set of prebuilt UI components for integrating cross-chain bridging and swapping into your web app. It supports all ecosystems, chains, bridges, exchanges, and solvers that LI.FI offers — styled to match your design.

<Card title="Widget Playground" icon="grid-round" href="https://playground.li.fi/">
  Explore the Widget interactively — configure and preview changes in real time
</Card>

**LI.FI Widget features include:**

* Embeddable variants (compact, wide, drawer) and modes (split, custom, refuel)
* Modular provider architecture — install only the ecosystems you need (Ethereum, Solana, Bitcoin, Sui, Tron) built on industry-standard libraries ([Viem](https://viem.sh/), [Wagmi](https://wagmi.sh/), [Bigmi](https://github.com/lifinance/bigmi), [Wallet Standard](https://github.com/wallet-standard/wallet-standard), [TronWallet Adapters](https://github.com/tronweb3/tronwallet-adapter))
* Theming, dark mode, and full CSS customization
* Built-in wallet management with opt-out support for your own wallet solution
* Allow/deny filtering for chains, tokens, bridges, and exchanges
* Gasless/relayer routes, route priority settings, and slippage controls
* Static and dynamic fee configuration for monetization
* Complete UI translations (17 languages)
* Industry standards support: [EIP-7702](https://eips.ethereum.org/EIPS/eip-7702), [EIP-5792](https://eips.ethereum.org/EIPS/eip-5792), [ERC-2612](https://eips.ethereum.org/EIPS/eip-2612), [EIP-712](https://eips.ethereum.org/EIPS/eip-712), [Permit2](https://github.com/Uniswap/permit2)
* Compatibility tested with React, Next.js, Vue, Nuxt.js, Svelte, Remix, Vite, RainbowKit, Reown AppKit, Privy, Dynamic, ConnectKit

<Info>
  **Composer works automatically in the Widget.** When users select a vault or staking token as their destination, Composer handles the deposit seamlessly. See the [Widget Composer Integration Guide](/composer/guides/widget-integration).
</Info>

## How to integrate the Widget

<Steps>
  <Step title="Install the Widget">
    Follow the [installation guide](/widget/install-widget).
  </Step>

  <Step title="Select a layout">
    Configure your widget [layout](/widget/select-widget-layout).
  </Step>

  <Step title="Configure the Widget">
    Set chains, tokens, fees, and route options in your [widget config](/widget/configure-widget).
  </Step>

  <Step title="Add blockchain providers">
    Install [provider packages](/widget/install-widget#blockchain-provider-packages) for the ecosystems you need.
  </Step>

  <Step title="Customize the theme">
    Match your app's look and feel with [theme customization](/widget/customize-widget).
  </Step>
</Steps>