> ## 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 React + Vite

> A guide to quickly integrate the Para Modal into your Vite-powered React application.

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

This guide will walk you through integrating Para SDK into your **Vite**-powered React application, providing seamless user authentication and wallet management.

## Prerequisites

Before starting, you'll need a Para API key which you can obtain from the <Link href="https://developer.getpara.com">Para Developer Portal</Link>. You can learn to create your account and get your API key from the Developer Portal.

<Card title="Setup Developer Portal" description="Get your API key and configure your developer portal settings" imgUrl="/images/v3/developer-portal-open-graph.png" href="/v3/react/guides/customization/developer-portal-setup" horizontal />

<DemoCallout variant="subtle" />

## Installation

Install the Para React SDK, React Query, and required polyfills for Vite:

<CodeGroup>
  ```bash npm theme={null}
  npm install @getpara/react-sdk @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 @farcaster/mini-app-solana @farcaster/miniapp-sdk @farcaster/miniapp-wagmi-connector @solana-mobile/wallet-adapter-mobile @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/wallet-adapter-walletconnect @solana/web3.js @stellar/stellar-sdk --save-exact && npm install vite-plugin-node-polyfills --save-dev
  ```

  ```bash yarn theme={null}
  yarn add @getpara/react-sdk @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 @farcaster/mini-app-solana @farcaster/miniapp-sdk @farcaster/miniapp-wagmi-connector @solana-mobile/wallet-adapter-mobile @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/wallet-adapter-walletconnect @solana/web3.js @stellar/stellar-sdk --exact && yarn add vite-plugin-node-polyfills -D
  ```

  ```bash pnpm theme={null}
  pnpm add @getpara/react-sdk @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 @farcaster/mini-app-solana @farcaster/miniapp-sdk @farcaster/miniapp-wagmi-connector @solana-mobile/wallet-adapter-mobile @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/wallet-adapter-walletconnect @solana/web3.js @stellar/stellar-sdk --save-exact && pnpm add vite-plugin-node-polyfills -D
  ```

  ```bash bun theme={null}
  bun add @getpara/react-sdk @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 @farcaster/mini-app-solana @farcaster/miniapp-sdk @farcaster/miniapp-wagmi-connector @solana-mobile/wallet-adapter-mobile @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/wallet-adapter-walletconnect @solana/web3.js @stellar/stellar-sdk --exact && bun add -d vite-plugin-node-polyfills
  ```
</CodeGroup>

<Info>
  Using wagmi v3? See [additional dependencies](/v3/react/troubleshooting/react-vite#wagmi-v3-module-resolution-errors) required.
</Info>

Then add the polyfill plugin to your `vite.config.js`:

```js vite.config.js theme={null}
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { nodePolyfills } from "vite-plugin-node-polyfills";

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

## Configure Providers

Create a providers component and wrap your application with it:

<Warning>
  The `import "@getpara/react-sdk/styles.css"` is **required** for the Para modal to display correctly. Without this import, the modal will not be visible.
</Warning>

<CodeGroup>
  ```jsx src/providers.jsx theme={null}
  import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
  import { ParaProvider } from "@getpara/react-sdk";
  import "@getpara/react-sdk/styles.css";

  const queryClient = new QueryClient();

  export function Providers({ children }) {
    return (
      <QueryClientProvider client={queryClient}>
        <ParaProvider
          paraClientConfig={{
            apiKey: import.meta.env.VITE_PARA_API_KEY || "",
          }}
          config={{
            appName: "YOUR_APP_NAME" // Replace with your app name
          }}
        >
          {children}
        </ParaProvider>
      </QueryClientProvider>
    );
  }
  ```

  ```jsx src/App.jsx theme={null}
  import { Providers } from './providers';

  function App() {
    return (
      <Providers>
        {/* Your app content */}
      </Providers>
    );
  }

  export default App;
  ```
</CodeGroup>

<Note>If you're using a legacy API key (one without an environment prefix) you must provide a value to the `paraClientConfig.environment`. You can retrieve your updated API key from the Para Developer Portal at [https://developer.getpara.com/](https://developer.getpara.com/)</Note>

<Info>
  You can learn more about the `ParaProvider` and its definition in the <Link href="/v3/react/guides/hooks/para-provider" label="ParaProvider Hooks Guide" />.
</Info>

<Note>
  The `ParaProvider` utilizes libraries like Wagmi, Graz, and Solana Wallet Adapter, to power wallet connections. Meaning you can use any of the hooks provided by these libraries when within the `ParaProvider` context. You can learn more about using external wallets in the <Link href="/v3/react/guides/external-wallets/multichain" label="External Wallets Guide" />.
</Note>

## Create a Connect Button

Now create a component that uses Para hooks to manage wallet connection:

```jsx ConnectButton.jsx theme={null}
import { useModal, useAccount, useWallet } from "@getpara/react-sdk";

export function ConnectButton() {
  const { openModal } = useModal();
  const { data: wallet } = useWallet();
  const { isConnected } = useAccount();

  return (
    <button onClick={() => openModal()}>
      {isConnected
        ? `Connected: ${wallet?.address?.slice(0, 6)}...${wallet?.address?.slice(-4)}`
        : "Connect Wallet"}
    </button>
  );
}
```

<Note>
  Learn more about the hooks used in this example:

  * <Link href="/v3/react/guides/hooks/use-modal" label="useModal" /> - Control the Para modal programmatically
  * <Link href="/v3/react/guides/hooks/use-wallet" label="useWallet" /> - Access the current wallet data
  * <Link href="/v3/react/guides/hooks/use-account" label="useAccount" /> - Get account connection status and details
</Note>

<Tip>
  **Testing?** Use `BETA` testing credentials for fast development. Check out the <Link href="/v3/react/testing-guide" label="Testing Guide" /> to learn about test emails and phone numbers.
</Tip>

## Example

<Card horizontal title="Vite + React Example" imgUrl="/images/v3/framework-react-vite.png" href="https://github.com/getpara/examples-hub/tree/3.0.0/web/with-react-vite" description="See a complete Vite React example with Para SDK integration." />

## Next Steps

Success you've set up Para with Vite! Now you can expand your application with wallet connections, account management, and more.

<CardGroup cols={3}>
  <Card title="Use React Hooks" description="Access account data and wallet operations" imgUrl="/images/v3/general-hooks.png" href="/v3/react/guides/hooks" icon="code" />

  <Card title="Sign Messages & Transactions" description="Learn to sign messages and send transactions" imgUrl="/images/v3/general-signing.png" href="/v3/react/guides/web3-operations/sign-with-para" icon="signature" />

  <Card title="Customize Your Setup" description="Theme the modal and configure advanced options" imgUrl="/images/v3/general-customize.png" href="/v3/react/guides/customization/modal" icon="palette" />
</CardGroup>