> ## Documentation Index
> Fetch the complete documentation index at: https://docs.reown.com/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, Bitcoin and TON.
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

Try installing AppKit Skills to get AI-assisted guidance. Your AI coding assistant can help you set up, build, and debug your AppKit integration.

To install AppKit Skills, run the following command in your terminal:

```bash theme={null}
npx skills add https://github.com/reown-com/skills --skill appkit --agent '*'
```

After installation, you can ask your AI assistant for help with AppKit setup, implementation, and troubleshooting.

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

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

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

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

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

## Cloud Configuration

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

<Card title="Don't have a project ID?" icon="circle-info" href="https://dashboard.reown.com/?utm_source=cloud_banner&utm_medium=docs&utm_campaign=backlinks">
  Head over to Reown Dashboard and create a new project.
</Card>

## 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">
    <Warning>
      MetaMask does not currently support WalletConnect connections on Solana. The MetaMask team is working on adding this feature. In the meantime, we recommend using other wallets that support Solana. You can find the complete list of supported wallets on [WalletGuide](https://walletguide.walletconnect.network/).
    </Warning>

    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>

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

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

    ```ts theme={null}
    // lib/appkit.ts
    import { browser } from '$app/environment'
    import { createAppKit } from '@reown/appkit'
    import { TonAdapter } from '@reown/appkit-adapter-ton'
    import { ton, tonTestnet } 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 = [ton, tonTestnet]

      // Create adapter
      const tonAdapter = new TonAdapter()

      // Initialize AppKit
      appKit = createAppKit({
        adapters: [tonAdapter],
        networks: [ton, tonTestnet],
        defaultNetwork: ton,
        projectId,
        metadata: {
          name: 'SvelteKit Example',
          description: 'SvelteKit Example using TON 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>

  <Tab title="TON">
    To open AppKit you can use our [**web component**](/appkit/svelte/core/components) or build your own button with AppKit [**actions**](/appkit/svelte/core/actions#open-and-close-the-modal).
    In this example we are going to use the `<appkit-button>` component.

    Web components are global html elements that don't require importing.

    ```svelte 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>
    ```
  </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>

## AppKit Skills

AppKit Skills provide AI-powered assistance for building with Reown AppKit. Once installed, your AI coding assistant can help you set up, build, and debug your AppKit integration.

To install AppKit Skills, run the following command in your terminal:

```bash theme={null}
npx skills add https://github.com/reown-com/skills --skill appkit --agent '*'
```

After installation, you can ask your AI assistant for help with AppKit setup, implementation, and troubleshooting.