> ## 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.

# Install Widget

> Easy installation to go multi-chain

To get started, install the latest version of LI.FI Widget along with the required peer dependencies.

## Installation

### Core Widget Package

<CodeGroup>
  ```bash yarn theme={"system"}
  yarn add @lifi/widget @tanstack/react-query
  ```

  ```bash pnpm theme={"system"}
  pnpm add @lifi/widget @tanstack/react-query
  ```

  ```bash npm theme={"system"}
  npm install @lifi/widget @tanstack/react-query
  ```

  ```bash bun theme={"system"}
  bun add @lifi/widget @tanstack/react-query
  ```
</CodeGroup>

### With Blockchain Providers

For full multi-chain support including Ethereum, Solana, Bitcoin, Sui, and Tron, install the widget with all provider packages and their peer dependencies:

<CodeGroup>
  ```bash yarn theme={"system"}
  yarn add @lifi/widget @lifi/widget-provider-ethereum @lifi/widget-provider-solana @lifi/widget-provider-bitcoin @lifi/widget-provider-sui @lifi/widget-provider-tron wagmi @wagmi/core @bigmi/react bs58 @mysten/dapp-kit-react @tronweb3/tronwallet-adapter-react-hooks @tanstack/react-query
  ```

  ```bash pnpm theme={"system"}
  pnpm add @lifi/widget @lifi/widget-provider-ethereum @lifi/widget-provider-solana @lifi/widget-provider-bitcoin @lifi/widget-provider-sui @lifi/widget-provider-tron wagmi @wagmi/core @bigmi/react bs58 @mysten/dapp-kit-react @tronweb3/tronwallet-adapter-react-hooks @tanstack/react-query
  ```

  ```bash npm theme={"system"}
  npm install @lifi/widget @lifi/widget-provider-ethereum @lifi/widget-provider-solana @lifi/widget-provider-bitcoin @lifi/widget-provider-sui @lifi/widget-provider-tron wagmi @wagmi/core @bigmi/react bs58 @mysten/dapp-kit-react @tronweb3/tronwallet-adapter-react-hooks @tanstack/react-query
  ```

  ```bash bun theme={"system"}
  bun add @lifi/widget @lifi/widget-provider-ethereum @lifi/widget-provider-solana @lifi/widget-provider-bitcoin @lifi/widget-provider-sui @lifi/widget-provider-tron wagmi @wagmi/core @bigmi/react bs58 @mysten/dapp-kit-react @tronweb3/tronwallet-adapter-react-hooks @tanstack/react-query
  ```
</CodeGroup>

## Dependencies Explained

### Core Dependencies

* [TanStack Query](https://tanstack.com/query/v5) - Async state manager that handles requests, caching, and more. Required peer dependency.

### Blockchain Provider Packages

These are optional packages that enable support for different blockchain ecosystems:

* **@lifi/widget-provider-ethereum** - Ethereum/EVM chain support
  * Peer dependencies: [wagmi](https://wagmi.sh/) ^3 and [@wagmi/core](https://wagmi.sh/) ^3

* **@lifi/widget-provider-solana** - Solana chain support
  * Peer dependency: [bs58](https://github.com/cryptocoinjs/bs58) >=4.0.1

* **@lifi/widget-provider-bitcoin** - Bitcoin chain support
  * Peer dependency: [@bigmi/react](https://github.com/lifinance/bigmi) ^0.8.0

* **@lifi/widget-provider-sui** - Sui chain support
  * Peer dependency: [@mysten/dapp-kit-react](https://sdk.mystenlabs.com/dapp-kit) ^2.0.0

* **@lifi/widget-provider-tron** - Tron chain support
  * Peer dependency: [@tronweb3/tronwallet-adapter-react-hooks](https://github.com/tronweb3/tronwallet-adapter) ^1.1.11

<Note>
  **Polyfill Requirements:** If you need to support older browsers, you'll need to install and configure polyfills. See the [Polyfill Requirements](/widget/polyfill-requirements) documentation for details.
</Note>

## Compatibility

The widget is compatible with React 19+ and works with various frameworks and wallet libraries including Next.js, Remix, Vue, Nuxt.js, Svelte, RainbowKit, ConnectKit, Privy, and more.

See the [Compatibility](/widget/compatibility) page for framework-specific setup guides and code examples.

Check out our complete examples in the [widget repository](https://github.com/lifinance/widget/tree/main/examples) or [file an issue](https://github.com/lifinance/widget/issues) if you have any incompatibilities.

## Basic Example

The widget is written in TypeScript and all configuration options are fully typed.

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

## Example with Blockchain Providers

For multi-chain support, configure the widget with blockchain providers:

```typescript theme={"system"}
import { LiFiWidget, WidgetConfig } from '@lifi/widget';
import { EthereumProvider } from '@lifi/widget-provider-ethereum';
import { SolanaProvider } from '@lifi/widget-provider-solana';
import { BitcoinProvider } from '@lifi/widget-provider-bitcoin';
import { SuiProvider } from '@lifi/widget-provider-sui';
import { TronProvider } from '@lifi/widget-provider-tron';

const widgetConfig: WidgetConfig = {
  providers: [
    EthereumProvider(),
    SolanaProvider(),
    BitcoinProvider(),
    SuiProvider(),
    TronProvider(),
  ],
  theme: {
    container: {
      border: '1px solid rgb(234, 234, 234)',
      borderRadius: '16px',
    },
  },
};

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