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

# React SDK Quickstart

> Get started with Para's React SDK in minutes with our interactive setup guide

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

export const SDKQuickstart = ({networks, snippets, id = 'sdk-quickstart'}) => {
  const [selectedPackageManager, setSelectedPackageManager] = useState(null);
  const [selectedNetworks, setSelectedNetworks] = useState(['EVM']);
  const [mounted, setMounted] = useState(false);
  const STORAGE_KEY = `para-quickstart-${id}`;
  useEffect(() => {
    let restoredPm = null;
    let restoredNetworks = null;
    try {
      const stored = JSON.parse(localStorage.getItem(STORAGE_KEY));
      if (stored?.pm && snippets.packageManagers.includes(stored.pm)) {
        restoredPm = stored.pm;
      }
      if (Array.isArray(stored?.networks) && stored.networks.length > 0) {
        const validNetworkKeys = Object.keys(networks);
        const validRestored = stored.networks.filter(n => validNetworkKeys.includes(n));
        if (validRestored.length > 0) restoredNetworks = validRestored;
      }
    } catch {}
    setSelectedPackageManager(restoredPm || snippets.packageManagers[0] || null);
    if (restoredNetworks) setSelectedNetworks(restoredNetworks);
    setMounted(true);
  }, []);
  useEffect(() => {
    if (!mounted) return;
    try {
      localStorage.setItem(STORAGE_KEY, JSON.stringify({
        pm: selectedPackageManager,
        networks: selectedNetworks
      }));
    } catch {}
  }, [selectedPackageManager, selectedNetworks, mounted]);
  const handleSelectNetwork = network => {
    if (selectedNetworks.includes(network)) {
      if (selectedNetworks.length > 1) {
        setSelectedNetworks(selectedNetworks.filter(n => n !== network));
      }
    } else {
      setSelectedNetworks([...selectedNetworks, network]);
    }
  };
  if (!mounted || !snippets) {
    return <div className="animate-pulse bg-gray-200 h-96 rounded-lg"></div>;
  }
  const currentPackageManagers = snippets.packageManagers || [];
  const currentSnippets = snippets.buildSnippet(selectedPackageManager, selectedNetworks);
  const installCode = currentSnippets.install;
  const setupCode = currentSnippets.setup;
  return <div className="max-w-4xl mx-auto" id={id}>
      <div className="flex flex-col gap-5">
        <PackageManagerSelector packageManagers={currentPackageManagers} selectedPackageManager={selectedPackageManager} onSelectPackageManager={setSelectedPackageManager} />

        <NetworkSelector networks={networks} selectedNetworks={selectedNetworks} onSelectNetwork={handleSelectNetwork} />
      </div>

      <div className="mt-8">
        <CustomCodeBlock title="Install SDK" language="bash" pageName="terminal" id="install-step">
          {installCode}
        </CustomCodeBlock>

        <CustomCodeBlock title="Basic Setup" language="typescript" pageName="app.tsx" id="setup-step">
          {setupCode}
        </CustomCodeBlock>
      </div>
    </div>;
};

export const SDKSnippetsReact = {
  packageManagers: ["npm", "yarn", "pnpm"],
  buildSnippet: (pm, selectedNetworks) => {
    const packages = ["@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"];
    const pmFlags = {
      npm: {
        cmd: "npm install",
        flag: "--save-exact"
      },
      yarn: {
        cmd: "yarn add",
        flag: "--exact"
      },
      pnpm: {
        cmd: "pnpm add",
        flag: "--save-exact"
      }
    };
    const sharedImports = `import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ParaProvider, useModal, useAccount, useWallet } from "@getpara/react-sdk";
import "@getpara/react-sdk/styles.css";`;
    const networkConfig = {
      EVM: {
        imports: `import { sepolia } from "wagmi/chains";`,
        setupVars: "",
        wallets: '"METAMASK"',
        connector: `          evmConnector: {
            config: {
              chains: [sepolia],
            },
          },`
      },
      Solana: {
        imports: `import { WalletAdapterNetwork } from "@solana/wallet-adapter-base";
import { clusterApiUrl } from "@solana/web3.js";`,
        setupVars: `const solanaNetwork = WalletAdapterNetwork.Devnet;
const endpoint = clusterApiUrl(solanaNetwork);`,
        wallets: '"PHANTOM", "SOLFLARE", "BACKPACK"',
        connector: `          solanaConnector: {
            config: {
              endpoint,
              chain: solanaNetwork,
              appIdentity: {
                uri: typeof window !== "undefined" ? \`\${window.location.protocol}//\${window.location.host}\` : "",
              },
            },
          },`
      },
      Cosmos: {
        imports: `import { cosmoshub } from "graz/chains";`,
        setupVars: `const cosmosChains = [cosmoshub];`,
        wallets: '"KEPLR", "LEAP"',
        connector: `          cosmosConnector: {
            config: {
              chains: cosmosChains,
              selectedChainId: cosmoshub.chainId,
            },
          },`
      },
      Stellar: {
        imports: "",
        setupVars: "",
        wallets: "",
        connector: ""
      }
    };
    const install = `${pmFlags[pm].cmd} ${packages.join(" ")} ${pmFlags[pm].flag}`;
    const allImports = [sharedImports, ...selectedNetworks.map(n => networkConfig[n]?.imports).filter(Boolean)].join("\n");
    const allSetupVars = ["const queryClient = new QueryClient();", ...selectedNetworks.map(n => networkConfig[n]?.setupVars).filter(Boolean)].join("\n");
    const allWallets = selectedNetworks.map(n => networkConfig[n]?.wallets).filter(Boolean).join(", ");
    const allConnectors = selectedNetworks.map(n => networkConfig[n]?.connector).filter(Boolean).join("\n");
    const setup = `"use client";

${allImports}

${allSetupVars}

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

  return (
    <div>
      {!isConnected ? (
        <button onClick={() => openModal()}>Connect Wallet</button>
      ) : (
        <div>
          <p>Connected: {wallet?.address}</p>
        </div>
      )}
    </div>
  );
}

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <ParaProvider
        paraClientConfig={{
          apiKey: "beta_YOUR_API_KEY_GOES_HERE",
        }}
        externalWalletConfig={{
          wallets: [${allWallets}],
${allConnectors}
          walletConnect: {
            projectId: "YOUR_WALLETCONNECT_PROJECT_ID",
          },
        }}
        config={{ appName: "Quickstart Para" }}>
        <HelloWorld />
      </ParaProvider>
    </QueryClientProvider>
  );
}`;
    return {
      install,
      setup
    };
  }
};

export const SDKQuickstartNetworks = {
  EVM: {
    label: "EVM",
    logo: "/images/v3/ethereum-eth-logo.png"
  },
  Solana: {
    label: "Solana",
    logo: "/images/v3/solana-sol-logo.png"
  },
  Cosmos: {
    label: "Cosmos",
    logo: "/images/v3/cosmos-atom-logo.png"
  },
  Stellar: {
    label: "Stellar",
    logo: "/images/v3/network-stellar.png"
  }
};

export const PackageManagerSelector = ({packageManagers, selectedPackageManager, onSelectPackageManager}) => {
  return <FilterSection title="Package Manager">
      {packageManagers.map(pm => <FilterButton key={pm} text={pm} isActive={selectedPackageManager === pm} onClick={() => onSelectPackageManager(pm)} />)}
    </FilterSection>;
};

export const NetworkSelector = ({networks, selectedNetworks, onSelectNetwork}) => {
  return <FilterSection title="Network">
      {Object.entries(networks).map(([networkKey, network]) => <FilterButton key={networkKey} text={network.label} isActive={selectedNetworks.includes(networkKey)} onClick={() => onSelectNetwork(networkKey)} icon={<img src={network.logo} alt={network.label} className="w-5 h-5 mt-0 mb-0" />} />)}
    </FilterSection>;
};

export const CustomCodeBlock = ({title, children, id, language = 'javascript', pageName}) => {
  const code = children?.toString().trim() || '';
  const [isTransitioning, setIsTransitioning] = useState(false);
  const prevCodeRef = useRef(code);
  useLayoutEffect(() => {
    if (code !== prevCodeRef.current) {
      setIsTransitioning(true);
      const timer = setTimeout(() => {
        prevCodeRef.current = code;
        setIsTransitioning(false);
      }, 150);
      return () => clearTimeout(timer);
    }
  }, [code]);
  return <div className="mb-8" id={id}>
      {title && <h3 className="text-base mb-2.5 mt-5">{title}</h3>}
      <div style={{
    opacity: isTransitioning ? 0 : 1,
    transition: 'opacity 150ms ease-in-out'
  }}>
        <CodeBlock language={language} filename={pageName}>
          {code}
        </CodeBlock>
      </div>
    </div>;
};

export const FilterSection = ({title, children, id}) => {
  return <div id={id} className="mb-5">
      <h2 className="text-lg mb-2.5 mt-0">{title}</h2>
      <div className="flex gap-2.5 flex-wrap">
        {children}
      </div>
    </div>;
};

export const FilterButton = ({text, isActive, onClick, icon, id}) => {
  const [isHovered, setIsHovered] = useState(false);
  const showGradient = isActive || isHovered;
  return <div className={`inline-block p-px rounded-xl transition-all duration-200 ${showGradient ? 'bg-gradient-to-r from-[#FF4E00] to-[#874AE3]' : 'bg-gray-200'}`}>
      <div className="bg-white rounded-[11px] flex items-center px-3 py-1.5 gap-2 cursor-pointer" onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} onClick={onClick}>
        {icon && <div className="w-5 h-5 flex items-center justify-center">
            {icon}
          </div>}
        <span className={`${isActive ? 'text-[#FF4E00]' : 'text-gray-700'} transition-colors duration-200`}>
          {text}
        </span>
      </div>
    </div>;
};

## Interactive Setup

<SDKQuickstart networks={SDKQuickstartNetworks} snippets={SDKSnippetsReact} id="react-quickstart" />

<DemoCallout variant="subtle" />

<Note>
  **Need an API Key?** Head to the <Link href="https://developer.getpara.com" label="Para Developer Portal" /> to create your account and get your API key. If you prefer the terminal, use the <Link href="/v3/cli/installation" label="Para CLI" /> to create, inspect, and configure keys from your local project.
</Note>

<Info>Using Claude, Codex, or another coding agent? The <Link href="/v3/cli/agentic-development" label="agentic CLI workflow" /> shows how to let an agent inspect your Para context, scaffold a starter, and run `para doctor` safely.</Info>

<Tip>Want a pre-configured starter instead? Run `npx @getpara/cli create` to scaffold a new project with the SDK, auth, and network settings ready to go. See the <Link href="/v3/cli/commands#scaffold-a-project" label="CLI docs" /> for details.</Tip>

## Next Steps

Once you've integrated the SDK, explore these guides to enhance your application:

<CardGroup cols={2}>
  <Card title="Sign Transactions" href="/v3/react/guides/web3-operations/sign-with-para" icon="signature">
    Learn how to sign transactions and messages with Para wallets
  </Card>

  <Card title="Developer Portal Setup" href="/v3/react/guides/customization/developer-portal-setup" icon="gear">
    Configure your app settings, branding, and security in the Developer Portal
  </Card>

  <Card title="Authentication & Sessions" href="/v3/react/guides/sessions" icon="clock">
    Manage user sessions, JWTs, and authentication flows
  </Card>

  <Card title="React Hooks Overview" href="/v3/react/guides/hooks" icon="sparkles">
    Explore all available React hooks for Para integration
  </Card>
</CardGroup>