Skip to main content
If you haven’t already you can create a new SvelteKit project by following the .
Although mixing React and Svelte is unusual, we can do so via . If you prefer to build your own custom UI, you can also use @getpara/web-sdk directly.Reach out to use for help with custom UI integration.

​
Prerequisites

To use Para, you need an API key. This key authenticates your requests to Para services and is essential for integration.
Don’t have an API key yet? Request access to the to create API keys, manage billing, teams, and more.
Try the live demo to explore authentication flows and customize your modal before integrating.Try Demo

​
Installing Dependencies & Peer Dependencies

First, install the Para React SDK and needed peer dependencies, plus React dependencies using your preferred package manager: 
npm install @getpara/react-sdk react react-dom @tanstack/react-query graz @cosmjs/cosmwasm-stargate @cosmjs/launchpad @cosmjs/proto-signing @cosmjs/stargate @cosmjs/tendermint-rpc @leapwallet/cosmos-social-login-capsule-provider long starknet wagmi@^2 viem @solana-mobile/wallet-adapter-mobile @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/wallet-adapter-walletconnect @solana/web3.js --save-exact

​
Configuring SvelteKit (Preprocessor & Polyfills)

​
Svelte Preprocess React

In your svelte.config.js, import and apply svelte-preprocess-react:
svelte.config.js
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: 
npm install vite-plugin-node-polyfills --save-dev
Then enable it in vite.config.ts:
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()],
});
If you prefer SSR, ensure you dynamically handle the React-based modal on the client. If you want pure client-side usage, set export const ssr = false; in your page’s .ts or .js files for SvelteKit to skip SSR.

​
Creating a QueryClient Instance

client/queryClient.ts
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

export const queryClient = new QueryClient();

​
Setting Up the Para SDK

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

​
Creating a Para Client Instance

As with other frameworks, you’ll need a dedicated file for your client instance (e.g., client/para.ts):
client/para.ts
import { ParaWeb } from "@getpara/react-sdk";

const PARA_API_KEY = import.meta.env.VITE_PARA_API_KEY;
export const para = new ParaWeb(PARA_API_KEY);
If you’re using a legacy API key (one without an environment prefix) you must provide the Environment as the first argument to the ParaWeb constructor. You can retrieve your updated API key from the Para Developer Portal at https://developer.getpara.com/

​
Using the Para Modal in a SvelteKit Route

Let’s say you have a +page.svelte in src/routes/. You would use the Para Modal with the preprocessed React component: 
<script lang="ts">
  import { ParaModal, OAuthMethod } from "@getpara/react-sdk";
  import "@getpara/react-sdk/styles.css";
  import { sveltify } from "svelte-preprocess-react";
  import Logo from "../assets/para-logo.svg";
  import { para } from "../client/para";
  import { QueryClientProvider } from "@tanstack/react-query";
  import { queryClient } from '../client/queryClient';

  export const ssr = false;

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

<div class="container">
  <button on:click={() => isModalOpen = true}>
    Open Para Modal
  </button>

  <!-- Render the React-based modal -->
  <react.QueryClientProvider client={queryClient}>
    <react.ParaProvider
      paraClientConfig={para}
      config={{appName: "SvelteKit + Para Modal"}}
      paraModalConfig={{
        isOpen: isModalOpen,
        onClose={() => isModalOpen = false},
        logo: Logo,
        disableEmailLogin: false,
        disablePhoneLogin: false,
        authLayout: [AuthLayout.AUTH_FULL],
        oAuthMethods: [
          "APPLE",
          "DISCORD",
          "FACEBOOK",
          "FARCASTER",
          "GOOGLE",
          "TWITTER",
        ],
        onRampTestMode: true,
        recoverySecretStepEnabled: true,
        twoFactorAuthEnabled: false,
        theme: {
          foregroundColor: "#2D3648",
          backgroundColor: "#FFFFFF",
          accentColor: "#0066CC",
          darkForegroundColor: "#E8EBF2",
          darkBackgroundColor: "#1A1F2B",
          darkAccentColor: "#4D9FFF",
          mode: "light",
          borderRadius: "none",
          font: "Inter",
        },
      }}
      externalWalletConfig={{
        wallets: []
      }}
    />
  </react.QueryClientProvider>
</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.
Beta Testing Credentials In the BETA Environment, you can use any email ending in @test.getpara.com (like dev@test.getpara.com) or US phone numbers (+1) in the format (area code)-555-xxxx (like (425)-555-1234). Any OTP code will work for verification with these test credentials. These credentials are for beta testing only. You can delete test users anytime in the beta developer console to free up user slots.

​
Customizing the Para Modal

Just like in React, you can provide any additional props to the <ParaProvider> component. For example, customizing modal theming: 
<react.ParaProvider 
  // ...other provider props
  paraModalConfig={{
    // ...other modal config props
    theme: {
      backgroundColor: "#FFF", 
      foregroundColor: "#000", 
      accentColor: "#FFA800", 
      mode: "light" 
    }
  }}
/>
For a full list of available ParaModalProps, refer to the customization guide:

Detailed Customization Guide

​
Examples

For an example of using Para SDK in a Svelte application, check out our Examples Hub repository:

Svelte Examples

​
Troubleshooting

If you encounter issues during the integration or usage of the Para Modal in a Svelte-based app, here are some common problems and their solutions:

Troubleshooting