SvelteKit

This guide details how to integrate the Capsule Modal—originally built in React—into your SvelteKit application. Although mixing React and Svelte is unusual, we can do so via svelte-preprocess-react. If you prefer to build your own custom UI, you can also use @usecapsule/web-sdk directly.

If you haven’t already you can create a new SvelteKit project by following the official SvelteKit docs. Alternatively, you can fork our minimal starter that already includes the Capsule Modal setup: Capsule Nuxt 3 Starter.

​

Prerequisites

To use Capsule, you need an API key. This key authenticates your requests to Capsule services and is essential for integration.

​

Installing Dependencies

Install the Capsule React SDK, plus React dependencies:

​

Configuring SvelteKit (Preprocessor & Polyfills)

​

Svelte Preprocess React

In your svelte.config.js, import and apply svelte-preprocess-react:

import adapter from "@sveltejs/adapter-auto";
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
import preprocessReact from "svelte-preprocess-react/preprocessReact";

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: [vitePreprocess(), preprocessReact()],
  kit: {
    adapter: adapter(),
  },
};

export default config;

​

Vite Plugins (Node Polyfills)

SvelteKit uses Vite under the hood. Install and configure polyfills for Node modules:

Then enable it in vite.config.ts:

import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vite";
import { nodePolyfills } from "vite-plugin-node-polyfills";

export default defineConfig({
  plugins: [sveltekit(), nodePolyfills()],
});

​

Setting Up the Capsule SDK

Now that you’ve installed the necessary dependencies, let’s set up the Capsule SDK in your SvelteKit application. This involves creating a client instance and integrating the Capsule Modal.

​

Creating a Capsule Client Instance

As with other frameworks, you’ll need a dedicated file for your client instance (e.g., client/capsule.ts):

import { Environment, CapsuleWeb } from "@usecapsule/react-sdk";

const CAPSULE_API_KEY = import.meta.env.VITE_CAPSULE_API_KEY;
export const capsuleClient = new CapsuleWeb(Environment.BETA, CAPSULE_API_KEY);

​

Using the Capsule Modal in a SvelteKit Route

Let’s say you have a +page.svelte in src/routes/. You would use the Capsule Modal with the preprocessed React component:

<script lang="ts">
  import { CapsuleModal, OAuthMethod } from "@usecapsule/react-sdk";
  import "@usecapsule/react-sdk/styles.css";
  import { sveltify } from "svelte-preprocess-react";
  import Logo from "../assets/capsule-logo.svg";
  import { capsuleClient } from "../client/capsule";

 export const ssr = false;

  const react = sveltify({ CapsuleModal });
  let isModalOpen = false;
</script>

<div class="container">
  <button on:click={() => isModalOpen = true}>
    Open Capsule Modal
  </button>
  <!-- Render the React-based modal -->
  <react.CapsuleModal
    capsule={capsuleClient}
    appName="SvelteKit + Capsule Modal"
    logo={Logo}
    disableEmailLogin={false}
    disablePhoneLogin={false}
    oAuthMethods={Object.values(OAuthMethod)}
    isOpen={isModalOpen}
    onClose={() => isModalOpen = false}
    onRampTestMode={true}
    twoFactorAuthEnabled={false}
  />
</div>

<style>
// Add your custom styles here
</style>

With SSR disabled, the page will be served client-side only, ensuring the React-based modal can load without conflicts.

​

Customizing the Capsule Modal

Just like in React, you can provide any additional props to the <CapsuleModal> component. For example, customizing theming:

<react.CapsuleModal
  capsule={capsuleClient}
  isOpen={isModalOpen}
  theme={{
    backgroundColor: "#FFF",
    foregroundColor: "#000",
    accentColor: "#FFA800",
    mode: "light",
  }}
  ...
/>

​

If You Don’t Want to Use the React Modal

Use `@usecapsule/web-sdk` to build your own SvelteKit-based UI from scratch. This approach avoids mixing React entirely. For details on how to do this, refer to the Customize Capsule guide.

​

Examples

We have a dedicated SvelteKit Capsule SvelteKit Starter demonstrating how to setup the React-based Capsule Modal. Feel free to explore it for a deeper reference.

​

Next Steps

After integrating Capsule, you can explore other features and integrations to enhance your Capsule experience. Here are some resources to help you get started:

​

Ecosystems

Learn how to use Capsule with popular Web3 clients and wallet connectors. We’ll cover integration with key libraries for EVM, Solana, and Cosmos ecosystems.

If you’re ready to go live with your Capsule integration, make sure to review our go-live checklist:

​

Troubleshooting

​

Integration Support

If you’re experiencing issues that aren’t resolved by our troubleshooting resources, please contact our team for assistance. To help us resolve your issue quickly, please include the following information in your request:

1. 1

   A detailed description of the problem you’re encountering.

2. 2

   Any relevant error messages or logs.

3. 3

   Steps to reproduce the issue.

4. 4

   Details about your system or environment (e.g., device, operating system, software version).

Providing this information will enable our team to address your concerns more efficiently.