> ## Documentation Index
> Fetch the complete documentation index at: https://reown-5552f0bb-devin-1759771246-appkit-1-8-9-docs.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Installation

# Svelte

AppKit has support for [Wagmi](https://wagmi.sh/) and [Ethers v6](https://docs.ethers.org/v6/) on Ethereum, [@solana/web3.js](https://solana-labs.github.io/solana-web3.js/) on Solana and Bitcoin.
Choose one of these to get started.

<Note>
  We recommend using [SvelteKit v5](https://kit.svelte.dev/) to get started with AppKit Svelte.
</Note>

## Installation

<Tabs>
  <Tab title="Wagmi">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-wagmi wagmi viem
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-wagmi wagmi viem
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-wagmi wagmi viem
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-wagmi wagmi viem
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Ethers">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-ethers ethers
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-ethers ethers
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-ethers ethers
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-ethers ethers
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Solana">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-solana
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-solana
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-solana
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-solana
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Bitcoin">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-bitcoin
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-bitcoin
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-bitcoin
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-bitcoin
      ```
    </CodeGroup>
  </Tab>
</Tabs>

## Cloud Configuration

Create a new project on Reown Dashboard at [https://dashboard.reown.com](https://dashboard.reown.com) and obtain a new project ID.

<Info>
  **Don't have a project ID?**

  Head over to Reown Dashboard and create a new project now!

  <Card title="Get started" href="https://dashboard.reown.com/?utm_source=cloud_banner&utm_medium=docs&utm_campaign=backlinks" />
</Info>

## Implementation

<Tabs>
  <Tab title="Wagmi">
    <Card title="Svelte Wagmi Example" icon="github" href="https://github.com/reown-com/appkit/tree/main/examples/sveltekit-wagmi">
      Check the Svelte Wagmi example
    </Card>

    For this example, we'll be using **Wagmi** and **Viem**.

    Start by importing `createAppKit` from `@reown/appkit` and the necessary chains and WagmiAdapter from `@reown/appkit-adapter-wagmi`.

    ```ts theme={null}
    // lib/appkit.ts
    import { browser } from '$app/environment'
    import { createAppKit } from '@reown/appkit'
    import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
    import { arbitrum, mainnet } from '@reown/appkit/networks'

    // Only initialize in browser environment
    let appKit: ReturnType<typeof createAppKit> | undefined = undefined

    if (browser) {
      const projectId = import.meta.env.VITE_PROJECT_ID
      if (!projectId) {
        throw new Error('VITE_PROJECT_ID is not set')
      }

      const networks = [arbitrum, mainnet]

      // Create adapter
      const wagmiAdapter = new WagmiAdapter({
        networks,
        projectId
      })

      // Initialize AppKit
      appKit = createAppKit({
        adapters: [wagmiAdapter],
        networks: [arbitrum, mainnet],
        defaultNetwork: arbitrum,
        projectId,
        metadata: {
          name: 'SvelteKit Example',
          description: 'SvelteKit Example using Wagmi adapter',
          url: 'https://reown.com/appkit',
          icons: ['https://avatars.githubusercontent.com/u/179229932?s=200&v=4']
        }
      })
    }

    export { appKit }
    ```

    <Note>
      Make sure to set your `VITE_PROJECT_ID` environment variable which you can get from [Reown Dashboard](https://dashboard.reown.com).
    </Note>

    <Note>
      The `browser` check ensures AppKit is only initialized in the browser environment, which is important for SvelteKit's SSR compatibility.
    </Note>

    Then import this configuration in your app layout to ensure AppKit is initialized:

    ```javascript theme={null}
    <!-- src/routes/+layout.svelte -->
    <script>
      import '$lib/appkit';
    </script>
    ```
  </Tab>

  <Tab title="Ethers">
    <Card title="Svelte Ethers Example" icon="github" href="https://github.com/reown-com/appkit/tree/main/examples/sveltekit-ethers">
      Check the Svelte Ethers example
    </Card>

    For this example, we'll be using **Ethers**.

    Start by importing `createAppKit` from `@reown/appkit` and the necessary chains and EthersAdapter from `@reown/appkit-adapter-ethers`.

    ```ts theme={null}
    // lib/appkit.ts
    import { browser } from '$app/environment'
    import { createAppKit } from '@reown/appkit'
    import { EthersAdapter } from '@reown/appkit-adapter-ethers'
    import { arbitrum, mainnet } from '@reown/appkit/networks'

    // Only initialize in browser environment
    let appKit: ReturnType<typeof createAppKit> | undefined = undefined

    if (browser) {
      const projectId = import.meta.env.VITE_PROJECT_ID
      if (!projectId) {
        throw new Error('VITE_PROJECT_ID is not set')
      }

      const networks = [arbitrum, mainnet]

      // Create adapter
      const ethersAdapter = new EthersAdapter()

      // Initialize AppKit
      appKit = createAppKit({
        adapters: [ethersAdapter],
        networks: [arbitrum, mainnet],
        defaultNetwork: arbitrum,
        projectId,
        metadata: {
          name: 'SvelteKit Example',
          description: 'SvelteKit Example using Ethers adapter',
          url: 'https://reown.com/appkit',
          icons: ['https://avatars.githubusercontent.com/u/179229932?s=200&v=4']
        }
      })
    }

    export { appKit }
    ```

    <Note>
      Make sure to set your `VITE_PROJECT_ID` environment variable which you can get from [Reown Dashboard](https://dashboard.reown.com).
    </Note>

    <Note>
      The `browser` check ensures AppKit is only initialized in the browser environment, which is important for SvelteKit's SSR compatibility.
    </Note>
  </Tab>

  <Tab title="Solana">
    For this example, we'll be using **Solana**.

    Start by importing `createAppKit` from `@reown/appkit` and the necessary chains and SolanaAdapter from `@reown/appkit-adapter-solana`.

    ```ts theme={null}
    // lib/appkit.ts
    import { browser } from '$app/environment'
    import { createAppKit } from '@reown/appkit'
    import { SolanaAdapter } from '@reown/appkit-adapter-solana'
    import { solana, solanaTestnet, solanaDevnet } from '@reown/appkit/networks'

    // Only initialize in browser environment
    let appKit: ReturnType<typeof createAppKit> | undefined = undefined

    if (browser) {
      const projectId = import.meta.env.VITE_PROJECT_ID
      if (!projectId) {
        throw new Error('VITE_PROJECT_ID is not set')
      }

      const networks = [solana, solanaTestnet, solanaDevnet]

      // Create adapter
      const solanaAdapter = new SolanaAdapter()

      // Initialize AppKit
      appKit = createAppKit({
        adapters: [solanaAdapter],
        networks: [solana, solanaTestnet, solanaDevnet],
        defaultNetwork: solana,
        projectId,
        metadata: {
          name: 'SvelteKit Example',
          description: 'SvelteKit Example using Solana adapter',
          url: 'https://reown.com/appkit',
          icons: ['https://avatars.githubusercontent.com/u/179229932?s=200&v=4']
        }
      })
    }

    export { appKit }
    ```

    <Note>
      Make sure to set your `VITE_PROJECT_ID` environment variable which you can get from [Reown Dashboard](https://dashboard.reown.com).
    </Note>

    <Note>
      The `browser` check ensures AppKit is only initialized in the browser environment, which is important for SvelteKit's SSR compatibility.
    </Note>
  </Tab>

  <Tab title="Bitcoin">
    For this example, we'll be using **Bitcoin**.

    Start by importing `createAppKit` from `@reown/appkit` and the necessary chains and BitcoinAdapter from `@reown/appkit-adapter-bitcoin`.

    ```ts theme={null}
    // lib/appkit.ts
    import { browser } from '$app/environment'
    import { createAppKit } from '@reown/appkit'
    import { BitcoinAdapter } from '@reown/appkit-adapter-bitcoin'
    import { bitcoin, bitcoinTestnet, bitcoinSignet } from '@reown/appkit/networks'

    // Only initialize in browser environment
    let appKit: ReturnType<typeof createAppKit> | undefined = undefined

    if (browser) {
      const projectId = import.meta.env.VITE_PROJECT_ID
      if (!projectId) {
        throw new Error('VITE_PROJECT_ID is not set')
      }

      const networks = [bitcoin, bitcoinTestnet, bitcoinSignet]

      // Create adapter
      const bitcoinAdapter = new BitcoinAdapter()

      // Initialize AppKit
      appKit = createAppKit({
        adapters: [bitcoinAdapter],
        networks: [bitcoin, bitcoinTestnet, bitcoinSignet],
        defaultNetwork: bitcoin,
        projectId,
        metadata: {
          name: 'SvelteKit Example',
          description: 'SvelteKit Example using Bitcoin adapter',
          url: 'https://reown.com/appkit',
          icons: ['https://avatars.githubusercontent.com/u/179229932?s=200&v=4']
        }
      })
    }

    export { appKit }
    ```

    <Note>
      Make sure to set your `VITE_PROJECT_ID` environment variable which you can get from [Reown Dashboard](https://dashboard.reown.com).
    </Note>

    <Note>
      The `browser` check ensures AppKit is only initialized in the browser environment, which is important for SvelteKit's SSR compatibility.
    </Note>
  </Tab>
</Tabs>

## Trigger the modal

The recommended way to trigger the modal in Svelte is to use the `<appkit-button />` web component. After setting up AppKit in your application, you can simply use the button component anywhere in your Svelte templates:

```javascript theme={null}
<script lang="ts">
  // Import your AppKit configuration to ensure it's initialized
  import '$lib/appkit';
</script>

<main>
  <h1>Svelte + AppKit Integration</h1>
  
  <div class="card">
    <appkit-button />
  </div>
</main>
```

The `<appkit-button />` is a web component that's automatically registered when AppKit is initialized. No additional imports are required.

### Alternative approaches

You can also trigger the modal programmatically using the AppKit instance:

```javascript theme={null}
<script lang="ts">
  import { appKit } from '$lib/appkit';

  function openModal() {
    appKit?.open();
  }

  function openConnectModal() {
    appKit?.open({ view: 'Connect' });
  }

  function openAccountModal() {
    appKit?.open({ view: 'Account' });
  }
</script>

<button on:click={openModal}>Open Modal</button>
<button on:click={openConnectModal}>Connect Wallet</button>
<button on:click={openAccountModal}>View Account</button>
```

Or use other AppKit web components:

```javascript theme={null}
<appkit-connect-button />
<appkit-account-button />
<appkit-network-button />
```

<Tabs>
  <Tab title="Wagmi">
    The recommended way to trigger the modal is using the `initializeAppKit` function and web components:

    ```javascript theme={null}
    <script lang="ts">
      import { initializeAppKit } from './lib/stores/appkit';

      // Initialize AppKit with your project ID
      initializeAppKit('YOUR_PROJECT_ID');
    </script>

    <main>
      <appkit-button />
    </main>
    ```

    You can also trigger the modal programmatically by calling the `open` method from AppKit instance:

    ```javascript theme={null}
    <!-- +page.svelte -->
    <script>
      import { appKit } from '$lib/appkit'
      
      function openModal() {
        appKit?.open()
      }
    </script>

    <button on:click={openModal}>Open Modal</button>
    ```

    You can select the modal's view when calling the `open` function:

    ```javascript theme={null}
    <script>
      import { appKit } from '$lib/appkit'
      
      function openConnectModal() {
        appKit?.open({ view: 'Connect' })
      }
      
      function openAccountModal() {
        appKit?.open({ view: 'Account' })
      }
    </script>

    <button on:click={openConnectModal}>Connect Wallet</button>
    <button on:click={openAccountModal}>View Account</button>
    ```
  </Tab>

  <Tab title="Ethers">
    You can trigger the modal by calling the `open` method from AppKit instance.

    ```javascript theme={null}
    <!-- +page.svelte -->
    <script>
      import { appKit } from '$lib/appkit'
      
      function openModal() {
        appKit?.open()
      }
    </script>

    <button on:click={openModal}>Open Modal</button>
    ```

    You can also select the modal's view when calling the `open` function.

    ```javascript theme={null}
    <script>
      import { appKit } from '$lib/appkit'
      
      function openConnectModal() {
        appKit?.open({ view: 'Connect' })
      }
      
      function openAccountModal() {
        appKit?.open({ view: 'Account' })
      }
    </script>

    <button on:click={openConnectModal}>Connect Wallet</button>
    <button on:click={openAccountModal}>View Account</button>
    ```
  </Tab>

  <Tab title="Solana">
    You can trigger the modal by calling the `open` method from AppKit instance.

    ```javascript theme={null}
    <!-- +page.svelte -->
    <script>
      import { appKit } from '$lib/appkit'
      
      function openModal() {
        appKit?.open()
      }
    </script>

    <button on:click={openModal}>Open Modal</button>
    ```

    You can also select the modal's view when calling the `open` function.

    ```javascript theme={null}
    <script>
      import { appKit } from '$lib/appkit'
      
      function openConnectModal() {
        appKit?.open({ view: 'Connect' })
      }
      
      function openAccountModal() {
        appKit?.open({ view: 'Account' })
      }
    </script>

    <button on:click={openConnectModal}>Connect Wallet</button>
    <button on:click={openAccountModal}>View Account</button>
    ```
  </Tab>

  <Tab title="Bitcoin">
    You can trigger the modal by calling the `open` method from AppKit instance.

    ```javascript theme={null}
    <!-- +page.svelte -->
    <script>
      import { appKit } from '$lib/appkit'
      
      function openModal() {
        appKit?.open()
      }
    </script>

    <button on:click={openModal}>Open Modal</button>
    ```

    You can also select the modal's view when calling the `open` function.

    ```javascript theme={null}
    <script>
      import { appKit } from '$lib/appkit'
      
      function openConnectModal() {
        appKit?.open({ view: 'Connect' })
      }
      
      function openAccountModal() {
        appKit?.open({ view: 'Account' })
      }
    </script>

    <button on:click={openConnectModal}>Connect Wallet</button>
    <button on:click={openAccountModal}>View Account</button>
    ```
  </Tab>
</Tabs>

## Blockchain Interaction

<Tabs>
  <Tab title="Wagmi">
    You need to install @wagmi/core to interact with smart contracts:

    <CodeGroup>
      ```bash npm theme={null}
      npm install @wagmi/core
      ```

      ```bash Yarn theme={null}
      yarn add @wagmi/core
      ```

      ```bash Bun theme={null}
      bun a @wagmi/core
      ```

      ```bash pnpm theme={null}
      pnpm add @wagmi/core
      ```
    </CodeGroup>

    [Wagmi actions](https://wagmi.sh/core/api/actions/readContract) can help us interact with wallets and smart contracts:

    For this use case, we need to import the `wagmiConfig` from our AppKit WagmiAdapter configuration.

    ```ts theme={null}
    import { readContract } from "@wagmi/core";
    import { USDTAbi } from "../abi/USDTAbi";

    const USDTAddress = "0x...";

    const data = readContract(wagmiConfig, {
      address: USDTAddress,
      abi: USDTAbi,
      functionName: "totalSupply",
      args: [],
    });
    ```

    Read more about Wagmi actions for smart contract interaction [here](https://wagmi.sh/core/actions/readContract).
  </Tab>

  <Tab title="Ethers">
    [Ethers](https://docs.ethers.org/v6/) can help us interact with wallets and smart contracts:

    ```ts theme={null}
    import { BrowserProvider, Contract, parseEther } from "ethers";

    const provider = await appKit.subscribeProviders((state) => {
      return state["eip155"];
    });

    const addressFrom = await appKit.subscribeAccount((state) => {
      return state;
    });

    if (!provider) throw Error("No provider found");
    if (!addressFrom) throw Error("No address found");

    function sendTransaction() {
      const tx = {
        from: addressFrom,
        to: "0x...", // any address
        value: parseEther("0.0001"),
      };
      const ethersProvider = new BrowserProvider(provider);
      const signer = await ethersProvider.getSigner();
      const tx = await signer.sendTransaction(tx);
      console.log("transaction:", tx);
    }
    ```
  </Tab>
</Tabs>