​
Svelte

AppKit has support for Wagmi and Ethers v6 on Ethereum, @solana/web3.js on Solana and Bitcoin. Choose one of these to get started.

We recommend using SvelteKit to get started with AppKit Svelte.

​
Installation

npm install @reown/appkit @reown/appkit-adapter-wagmi wagmi viem

​
Cloud Configuration

Create a new project on Reown Cloud at https://cloud.reown.com and obtain a new project ID.

Don’t have a project ID?

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

Get started

​
Implementation

Svelte Wagmi Example

Check the Svelte Wagmi example

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.

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

Make sure to set your VITE_PROJECT_ID environment variable which you can get from Reown Cloud.

The browser check ensures AppKit is only initialized in the browser environment, which is important for SvelteKit’s SSR compatibility.

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

<!-- src/routes/+layout.svelte -->
<script>
  import '$lib/appkit';
</script>

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

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

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

<appkit-connect-button />
<appkit-account-button />
<appkit-network-button />

The recommended way to trigger the modal is using the initializeAppKit function and web components:

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

<!-- +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:

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

​
Blockchain Interaction

You need to install @wagmi/core to interact with smart contracts:

npm install @wagmi/core

Wagmi actions can help us interact with wallets and smart contracts:

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

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.