> ## 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 组件。

<CodeGroup>
  ```typescript yarn theme={"system"}
  yarn add @lifi/widget wagmi @bigmi/react @solana/wallet-adapter-react @mysten/dapp-kit @tanstack/react-query
  ```

  ```typescript pnpm theme={"system"}
  pnpm add @lifi/widget wagmi @bigmi/react @solana/wallet-adapter-react @mysten/dapp-kit @tanstack/react-query
  ```

  ```typescript bun theme={"system"}
  bun add @lifi/widget wagmi @bigmi/react @solana/wallet-adapter-react @mysten/dapp-kit @tanstack/react-query
  ```

  ```typescript npm theme={"system"}
  npm install @lifi/widget wagmi @bigmi/react @solana/wallet-adapter-react @mysten/dapp-kit @tanstack/react-query
  ```
</CodeGroup>

[Wagmi](https://wagmi.sh/) 是一个类型安全、可扩展且模块化的库，用于构建以太坊应用程序。

[Bigmi](https://github.com/lifinance/bigmi) 是一个模块化的 TypeScript 库，为构建比特币应用程序提供响应式原语。

[@solana/wallet-adapter-react](https://github.com/anza-xyz/wallet-adapter) 是用于 Solana 应用程序的模块化 TypeScript 钱包适配器和组件。

[@mysten/dapp-kit](https://sdk.mystenlabs.com/dapp-kit) 为 Sui 区块链 dApp 中的钱包集成和数据访问提供 React 工具。

[TanStack Query](https://tanstack.com/query/v5) 是一个异步状态管理器，处理请求、缓存等功能。

## 兼容性

我们迄今为止测试过的环境、库和框架列表：

* React 19+ ([示例](https://github.com/lifinance/widget/tree/main/examples/vite))

* Vite ([示例](https://github.com/lifinance/widget/tree/main/examples/vite))

* Next.js ([与 Next.js、Remix、Nuxt 等的兼容性](/widget/compatibility)，[示例](https://github.com/lifinance/widget/tree/main/examples/nextjs))

* Remix ([示例](https://github.com/lifinance/widget/tree/main/examples/remix))

* Vue 3 ([示例](https://github.com/lifinance/widget/tree/main/examples/vue))

* Svelte ([示例](https://github.com/lifinance/widget/tree/main/examples/svelte))

* Nuxt.js ([示例](https://github.com/lifinance/widget/tree/main/examples/nuxt))

* Gatsby ([示例](https://github.com/lifinance/widget/tree/main/examples))

* RainbowKit ([示例](https://github.com/lifinance/widget/tree/main/examples/rainbowkit))

有关更多信息，请查看兼容性页面。

查看我们在 [组件仓库](https://github.com/lifinance/widget/tree/main/examples) 中的完整示例，如有任何不兼容问题，请[提交问题](https://github.com/lifinance/widget/issues)。

<Note>
  查看我们的 [LI.FI 演示平台](https://playground.li.fi/) 以实时体验自定义选项。
</Note>

## 基本示例

这是一个使用 LI.FI 组件进行容器自定义的基本示例。

```typescript theme={"system"}
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} />
  );
};
```