> ## 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 概览

> 跨链和链上交换与桥接 UI 工具包

LI.FI Widget 是一套预构建的 UI 组件，用于将跨链桥接和交换集成到你的 Web 应用中。它支持 LI.FI 提供的所有生态系统、链、桥、交易所和 solver——并可设计成与你的设计相匹配。

<Card title="Widget Playground" icon="grid-round" href="https://playground.li.fi/">
  以交互方式探索 Widget——实时配置并预览更改
</Card>

**LI.FI Widget 的功能包括：**

* 可嵌入的变体（紧凑型、宽屏型、抽屉型）和模式（split、custom、refuel）
* 模块化提供者架构——只安装你需要的生态系统（Ethereum、Solana、Bitcoin、Sui、Tron），构建于业界标准库之上（[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)）
* 主题化、深色模式和完整的 CSS 自定义
* 内置钱包管理，并支持退出以使用你自己的钱包解决方案
* 针对链、代币、桥和交易所的 allow/deny 筛选
* 无 gas/relayer 路由、路由优先级设置和滑点控制
* 用于变现的静态和动态费用配置
* 完整的 UI 翻译（17 种语言）
* 支持行业标准：[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)
* 已通过与 React、Next.js、Vue、Nuxt.js、Svelte、Remix、Vite、RainbowKit、Reown AppKit、Privy、Dynamic、ConnectKit 的兼容性测试

<Info>
  **Composer 在 Widget 中自动工作。** 当用户选择金库或质押代币作为其目标时，Composer 会无缝处理存款。请参阅 [Widget Composer 集成指南](/composer/guides/widget-integration)。
</Info>

## 如何集成 Widget

<Steps>
  <Step title="安装 Widget">
    遵循 [安装指南](/widget/install-widget)。
  </Step>

  <Step title="选择布局">
    配置你的 widget [布局](/widget/select-widget-layout)。
  </Step>

  <Step title="配置 Widget">
    在你的 [widget 配置](/widget/configure-widget) 中设置链、代币、费用和路由选项。
  </Step>

  <Step title="添加区块链提供者">
    为你需要的生态系统安装 [提供者包](/widget/install-widget#blockchain-provider-packages)。
  </Step>

  <Step title="自定义主题">
    通过 [主题自定义](/widget/customize-widget) 匹配你应用的外观和体验。
  </Step>
</Steps>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.