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

> Complete guide to integrating Para's React SDK for Web3 authentication and wallet management

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

Para's React SDK provides a comprehensive solution for Web3 authentication and wallet management in React applications. Navigate through our documentation to find the right integration path for your project.

<DemoCallout variant="card" />

## React Frameworks

Get started with Para in your preferred React framework. Each guide provides framework-specific setup instructions and best practices.

<CardGroup cols={2}>
  <Card title="Next.js" imgUrl="/images/v3/framework-nextjs.png" href="/v3/react/setup/nextjs" description="Full-stack React framework with server-side rendering and API routes" horizontal />

  <Card title="React + Vite" imgUrl="/images/v3/framework-react-vite.png" href="/v3/react/setup/vite" description="Lightning-fast development with Vite's modern build tooling" horizontal />

  <Card title="TanStack Start" imgUrl="/images/v3/framework-tanstack-start.png" href="/v3/react/setup/tanstack-start" description="Type-safe, full-stack React framework with built-in routing" horizontal />

  <Card title="React Hooks" imgUrl="/images/v3/framework-react.png" href="/v3/react/guides/hooks/para-provider" description="Explore Para's React hooks for state management and wallet operations" horizontal />
</CardGroup>

## Getting Started

Begin your Para integration journey with these essential resources designed to get you up and running quickly.

<CardGroup cols={3}>
  <Card title="Quickstart Guide" href="/v3/react/quickstart" description="Interactive setup guide to integrate Para in minutes" />

  <Card title="Code Examples" href="/v3/react/examples" description="Browse working examples across different use cases" />

  <Card title="Framework Setup" href="/v3/react/setup/nextjs" description="Detailed setup instructions for your React framework" />
</CardGroup>

## Sign Transactions & Messages

Learn how to sign transactions and messages using Para's wallet infrastructure and integrate with popular Web3 libraries.

### Core Signing Operations

<CardGroup cols={2}>
  <Card title="Sign with Para Client" href="/v3/react/guides/web3-operations/sign-with-para" description="Use Para's client to sign transactions and messages directly" horizontal />

  <Card title="Wallet Operations" href="/v3/react/guides/web3-operations/get-wallet-address" description="Get addresses, switch wallets, and query balances" horizontal />
</CardGroup>

### Blockchain Libraries

<CardGroup cols={3}>
  <Card title="Ethereum/EVM" imgUrl="/images/v3/network-evm.png" href="/v3/react/guides/web3-operations/evm/setup-libraries" description="Ethers.js, Viem, Wagmi integration" />

  <Card title="Solana" imgUrl="/images/v3/network-solana.png" href="/v3/react/guides/web3-operations/solana/setup-libraries" description="Web3.js and Anchor framework" />

  <Card title="Cosmos" imgUrl="/images/v3/network-cosmos.png" href="/v3/react/guides/web3-operations/cosmos/setup-libraries" description="CosmJS and IBC transfers" />

  <Card title="Stellar" imgUrl="/images/v3/network-stellar.png" href="/v3/react/guides/web3-operations/stellar/setup-libraries" description="Stellar SDK and Soroban" />
</CardGroup>

### Smart Accounts

<CardGroup cols={2}>
  <Card title="Account Abstraction" href="/v3/react/guides/web3-operations/evm/account-abstraction" description="Build with ERC-4337 and EIP-7702 smart accounts" horizontal />
</CardGroup>

## Manage Users & Authentication

Implement secure authentication flows and manage user sessions with Para's comprehensive auth system.

<CardGroup cols={2}>
  <Card title="Session Management" imgUrl="/images/v3/general-sessions.png" href="/v3/react/guides/sessions" description="Handle user sessions, JWT tokens, and session lifecycle" horizontal />

  <Card title="User Permissions" imgUrl="/images/v3/general-permissions.png" href="/v3/react/guides/permissions" description="Control wallet permissions and transaction approval flows" horizontal />
</CardGroup>

### Wallet Connection Options

<CardGroup cols={3}>
  <Card title="External EVM Wallets" imgUrl="/images/v3/wallets-evm.png" href="/v3/react/guides/external-wallets/evm" description="MetaMask, WalletConnect, Coinbase" />

  <Card title="Solana Wallets" imgUrl="/images/v3/wallets-solana.png" href="/v3/react/guides/external-wallets/solana" description="Phantom, Solflare, Backpack" />

  <Card title="Cosmos Wallets" imgUrl="/images/v3/wallets-cosmos.png" href="/v3/react/guides/external-wallets/cosmos" description="Keplr, Leap, Station" />
</CardGroup>

### Advanced Authentication

<CardGroup cols={2}>
  <Card title="Wallet Pregeneration" imgUrl="/images/v3/feature-pregeneration.png" href="/v3/react/guides/pregen" description="Create wallets before user signup for seamless onboarding" />

  <Card title="Guest Mode" imgUrl="/images/v3/general-new-feature.png" href="/v3/react/guides/customization/guest-mode" description="Allow users to explore your app before creating an account" />
</CardGroup>

## Customize Your Integration

Tailor Para's appearance and behavior to match your brand and user experience requirements.

### Developer Portal Configuration

<CardGroup cols={3}>
  <Card title="Portal Setup" href="/v3/react/guides/customization/developer-portal-setup" description="Configure your app settings" />

  <Card title="Email Branding" href="/v3/react/guides/customization/developer-portal-email-branding" description="Customize email templates" />

  <Card title="Payment Providers" href="/v3/react/guides/customization/developer-portal-payments" description="Set up fiat on/off ramps" />
</CardGroup>

### UI Customization

<CardGroup cols={2}>
  <Card title="Modal Customization" href="/v3/react/guides/customization/modal" description="Style the Para modal to match your brand identity" horizontal />

  <Card title="Custom UI with Hooks" href="/v3/react/guides/custom-ui-simplified" description="Build completely custom authentication flows with React hooks" horizontal />
</CardGroup>

## Advanced Features

Explore advanced capabilities and integration patterns for complex use cases.

<Card title="Walkthrough Guides" href="/v3/walkthroughs/bulk-pregeneration" imgUrl="/images/v3/general-examples.png" description="Step-by-step guides for complex implementations" horizontal />

### Resources & Support

<CardGroup cols={3}>
  <Card title="API Reference" href="/v3/references/overview" description="Complete SDK method reference" />

  <Card title="Troubleshooting" href="/v3/react/troubleshooting/nextjs" description="Framework-specific solutions" />

  <Card title="Integration Checklist" href="/v3/general/checklist" description="Production readiness guide" />
</CardGroup>