> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getpara.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Para with Svelte + Vite

> Set up a Svelte + Vite app with Para's Web SDK and build custom authentication and wallet UI.

export const DemoCallout = ({variant = "card", title = "Interactive Demo", description = "Try the live demo to explore authentication flows and customize your modal before integrating."}) => {
  if (variant === "subtle") {
    return <div className="not-prose my-4 px-4 py-3 rounded-xl border border-orange-200 bg-orange-50/50">
        <div className="flex items-center justify-between gap-4">
          <p className="text-sm text-gray-700 m-0">
            {description}
          </p>
          <a href="https://demo.getpara.com/" target="_blank" rel="noopener noreferrer" className="not-prose flex-shrink-0 inline-flex items-center gap-2 px-3 py-1.5 text-xs font-semibold text-orange-600 bg-white border border-orange-200 rounded-lg hover:bg-orange-50 transition-colors no-underline">
            Try Demo
            <svg width="12" height="12" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M40 472L472 40M472 40H83.2M472 40V428.8" stroke="currentColor" strokeWidth="66.6667" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </a>
        </div>
      </div>;
  }
  return <a href="https://demo.getpara.com/" target="_blank" rel="noopener noreferrer" className="not-prose block my-4 p-5 rounded-xl bg-gradient-to-r from-orange-600 via-pink-600 to-purple-600 hover:opacity-95 transition-opacity no-underline">
      <div className="flex items-center justify-between gap-4">
        <div>
          <h3 className="text-base font-semibold text-white m-0">{title}</h3>
          <p className="text-xs text-white/80 mt-1 m-0">{description}</p>
        </div>
        <div className="flex-shrink-0 w-8 h-8 rounded-full bg-white/20 flex items-center justify-center">
          <svg width="14" height="14" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M40 472L472 40M472 40H83.2M472 40V428.8" stroke="white" strokeWidth="66.6667" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>
      </div>
    </a>;
};

export const Link = ({href, label, newTab = false}) => {
  const [isHovered, setIsHovered] = useState(false);
  return <a href={href} target={newTab ? '_blank' : '_self'} rel={newTab ? 'noopener noreferrer' : undefined} className="not-prose inline-block relative text-black font-semibold cursor-pointer border-b-0 no-underline" onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
      {label}
      <span className={`absolute left-0 bottom-0 w-full rounded-sm bg-gradient-to-r from-orange-600 to-purple-600 transition-all duration-300 ${isHovered ? 'h-0.5' : 'h-px'}`} />
    </a>;
};

Para does not ship a prebuilt Svelte UI. Use the framework-agnostic `@getpara/web-sdk` and build the authentication, wallet, and signing screens inside your Svelte app.

## Prerequisites

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

<Warning>
  Don't have an API key yet? Request access to the <Link label="Developer Portal" href="https://developer.getpara.com" /> to create API keys, manage billing, teams, and more.
</Warning>

<DemoCallout variant="subtle" />

## Install the Web SDK

Install the Para Web SDK using your preferred package manager:

<CodeGroup>
  ```bash npm theme={null}
  npm install @getpara/web-sdk --save-exact
  ```

  ```bash yarn theme={null}
  yarn add @getpara/web-sdk --exact
  ```

  ```bash pnpm theme={null}
  pnpm add @getpara/web-sdk --save-exact
  ```

  ```bash bun theme={null}
  bun add @getpara/web-sdk --exact
  ```
</CodeGroup>

## Create a Para Client

Create a shared client module for your Svelte app:

```ts client/para.ts theme={null}
import { ParaWeb } from "@getpara/web-sdk";

const PARA_API_KEY = import.meta.env.VITE_PARA_API_KEY;

export const para = new ParaWeb(PARA_API_KEY);
```

Create your API key in the <Link label="Developer Portal" href="https://developer.getpara.com" />, then expose it to Vite as `VITE_PARA_API_KEY`.

## Build the Custom UI

Use Para's Web SDK methods from your Svelte components and render the screens your product needs.

<Steps>
  <Step title="Build authentication screens">
    Use `authenticateWithEmailOrPhone`, `authenticateWithOAuth`, and `verifyNewAccount` to drive sign-up and login. Listen to `para.onStatePhaseChange()` so your UI can open the verification, passkey, password, or PIN URLs that Para returns.
  </Step>

  <Step title="Build wallet screens">
    Render wallet creation, wallet selection, address display, loading states, and recovery prompts in your own Svelte components.
  </Step>

  <Step title="Sign with Para">
    After the user is authenticated and has a wallet, call Para signing methods from the Web SDK and show signing status in your own UI.
  </Step>
</Steps>

<Info>
  Sepolia examples need testnet ETH before sending transactions or writing contracts. After resolving the Para EVM wallet ID, call `para.requestFaucet({ walletId, chain: "ETHEREUM_SEPOLIA" })` from the Web SDK. If `chain` is omitted, the faucet defaults to `ETHEREUM_SEPOLIA`. See [Fund Testnet Wallet](/v3/react/guides/web3-operations/evm/fund-testnet-wallet) for the same request shape in React.
</Info>

## Next Docs

<CardGroup cols={2}>
  <Card title="Custom UI with Web SDK" icon="code" href="/v3/react/guides/custom-ui-web-sdk#svelte">
    Build framework-agnostic auth screens with Svelte examples.
  </Card>

  <Card title="Build Custom UI" icon="paintbrush" href="/v3/introduction/build-custom-ui">
    Review the custom UI path and where it hands off into platform docs.
  </Card>

  <Card title="Developer Portal Authentication" icon="fingerprint" href="/v3/react/guides/customization/developer-portal-authentication">
    Configure login methods, external wallets, guest mode, and 2FA.
  </Card>

  <Card title="Sign with Para" icon="signature" href="/v3/react/guides/web3-operations/sign-with-para">
    Verify the integration by signing a message or transaction.
  </Card>
</CardGroup>