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

# Welcome

> Para is the most comprehensive wallet and authentication suite for crypto and fintech developers.

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 IconTileGrid = ({children}) => {
  if (typeof document === "undefined") return null;
  return <div className="not-prose flex flex-col gap-2">
      {children}
    </div>;
};

export const IconTileRow = ({title, children}) => {
  if (typeof document === "undefined") return null;
  return <div>
      <h6 className="not-prose text-xl font-semibold mb-3 mt-0">{title}</h6>
      <div className="flex flex-wrap justify-start gap-4">
        {children}
      </div>
    </div>;
};

export const IconTile = ({src, label, href, disabled = false, disabledLabel = "Talk to us!", id = 'icon-tile'}) => {
  const [isHovered, setIsHovered] = useState(false);
  const [isLabelVisible, setIsLabelVisible] = useState(false);
  const handleMouseEnter = () => {
    setIsHovered(true);
    setIsLabelVisible(true);
  };
  const handleMouseLeave = () => {
    setIsHovered(false);
    setIsLabelVisible(false);
  };
  return <div className={`not-prose relative w-24 h-24 p-[1px] rounded-xl transition-all duration-300 ${isHovered ? 'bg-gradient-to-r from-[#FF4E00] to-[#874AE3]' : 'bg-gray-200'}`} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
      <a href={disabled ? undefined : href} className={`not-prose flex flex-col justify-center items-center p-4 w-full h-full bg-white ${disabled ? 'cursor-default' : 'cursor-pointer'} rounded-[11px] no-underline`} onClick={disabled ? e => e.preventDefault() : undefined}>
        <div className="relative w-12 h-12">
          <img src={src} alt={label} className={`w-full h-full m-0 object-contain ${disabled ? 'grayscale' : ''}`} />
          <div className="absolute top-0 left-0 w-full h-full bg-transparent pointer-events-auto" />
        </div>
        <div className={`absolute bottom-0 overflow-hidden w-full rounded-b-xl transition-opacity duration-300 ${isLabelVisible ? 'opacity-100' : 'opacity-0'}`}>
          <div className="bg-gradient-to-r from-[#FF4E00] to-[#874AE3] py-1">
            <span className="block text-xs text-white text-center">
              {disabled ? disabledLabel : label}
            </span>
          </div>
        </div>
      </a>
    </div>;
};

export const ImageCard = ({imgUrl, title, description, href, horizontal = false, newTab = false}) => {
  const [isHovered, setIsHovered] = useState(false);
  const handleClick = e => {
    e.preventDefault();
    if (newTab) {
      window.open(href, '_blank', 'noopener,noreferrer');
    } else {
      window.location.href = href;
    }
  };
  return <div className={`not-prose relative my-2 p-[1px] rounded-xl transition-all duration-300 ${isHovered ? 'bg-gradient-to-r from-[#FF4E00] to-[#874AE3]' : 'bg-gray-200'}`} onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
      <a href={href} onClick={handleClick} className={`not-prose flex ${horizontal ? 'flex-row' : 'flex-col'} font-normal h-full bg-white overflow-hidden w-full cursor-pointer rounded-[11px] no-underline`}>
        {imgUrl && <div className={`relative overflow-hidden flex-shrink-0 ${horizontal ? 'w-[30%] rounded-l-[11px]' : 'w-full'}`} onClick={e => e.stopPropagation()}>
            <img src={imgUrl} alt={title} className="w-full h-full object-cover pointer-events-none select-none" draggable="false" />
            <div className="absolute inset-0 pointer-events-none" />
          </div>}
        <div className={`flex-grow px-6 py-5 ${horizontal ? 'w-[70%]' : 'w-full'} flex flex-col ${horizontal && imgUrl ? 'justify-center' : 'justify-start'}`}>
          {title && <h2 className="font-semibold text-base text-gray-800 m-0">{title}</h2>}
          {description && <div className={`font-normal text-gray-500 re leading-6 ${horizontal || !imgUrl ? 'mt-0' : 'mt-1'}`}>
              <p className="m-0 text-xs">{description}</p>
            </div>}
        </div>
      </a>
    </div>;
};

<div className="not-prose mb-4 border-l-2 border-primary pl-4">
  <p className="m-0 text-xs font-semibold uppercase tracking-wide text-primary">
    Para at a glance
  </p>

  <p className="mt-2 text-base leading-7 text-zinc-700 dark:text-zinc-300">
    Para is an all-in-one developer suite to easily provision and manage embedded wallets directly within applications. Para is trusted by <strong className="font-semibold text-zinc-950 dark:text-white">100+ teams</strong> and their <strong className="font-semibold text-zinc-950 dark:text-white">15M+ users</strong>.
  </p>
</div>

<div className="not-prose mb-10 flex flex-wrap gap-x-5 gap-y-2 text-sm">
  <Link href="#choose-a-path" label="Choose a Path" />

  <Link href="#chain-integration-guides" label="Chain Integration Guides" />

  <Link href="#migrating-from-another-provider" label="Migrations" />

  <Link href="#additional-resources" label="Resources" />
</div>

## Choose a Path

Start by deciding who owns the user interface, who owns authentication, and where wallet operations run. Choose the path that matches those decisions, then use the platform docs as implementation details.

<CardGroup cols={3}>
  <ImageCard title="Use Para Modal" imgUrl="/images/v3/general-web.png" href="/v3/introduction/use-para-ui" description="Add Para's prebuilt React modal to React, Next.js, Vite, or TanStack Start apps." />

  <ImageCard title="Build Custom UI" imgUrl="/images/v3/general-customize.png" href="/v3/introduction/build-custom-ui" description="Own the auth and wallet screens with React hooks, Web SDK, Vue, Svelte, or mobile SDKs." />

  <ImageCard title="Use Para from Your Backend" imgUrl="/images/v3/general-server.png" href="/v3/introduction/use-para-api" description="Use REST or server-side SDKs when your backend owns auth, provisioning, automation, or signing." />
</CardGroup>

## Set Up Your Project

Every path starts with a Para project and API key. Create your project in the <Link href="https://developer.getpara.com/" label="Developer Portal" />, then follow the setup docs that match your integration.

<CardGroup cols={3}>
  <Card title="Get your API key" icon="gear" href="/v3/general/developer-portal-setup">
    Create projects, API keys, domains, and environment settings.
  </Card>

  <Card title="Framework support" icon="table-columns" href="/v3/introduction/framework-support">
    Compare SDK support across web, mobile, server, and REST integrations.
  </Card>

  <Card title="Examples" icon="code" href="/v3/introduction/examples">
    Start from a complete app or verify how an integration is wired.
  </Card>
</CardGroup>

## Why Teams Choose Para

The core product model stays the same across every path.

<CardGroup cols={3}>
  <Card title="Familiar authentication" icon="fingerprint">
    Users sign up with email, phone, social login, or passkey. No seed phrases or browser extensions required, ever.
  </Card>

  <Card title="Non-custodial by design" icon="shield-check">
    Private keys are split via MPC between the user's device and Para's secure infrastructure. Neither Para nor your application ever holds complete keys.
  </Card>

  <Card title="Multi-chain, every platform" icon="globe">
    Support for EVM, Solana, Cosmos, and Stellar with SDKs for web, mobile, and server.
  </Card>
</CardGroup>

## Browse by Platform

If you already know the SDK or framework you need, jump directly into its setup docs.

<IconTileGrid>
  <IconTileRow title="Web Frameworks">
    <IconTile src="/images/v3/icon-logo-react.png" label="React" href="/v3/react/setup/vite" />

    <IconTile src="/images/v3/icon-logo-next.png" label="Next.js" href="/v3/react/setup/nextjs" />

    <IconTile src="/images/v3/icon-logo-vue.png" label="Vue.js" href="/v3/vue/setup/vite" />

    <IconTile src="/images/v3/icon-logo-svelte.png" label="Svelte" href="/v3/svelte/setup/vite" />

    <IconTile src="/images/v3/icon-logo-pwa.png" label="PWA" href="/v3/react/setup/vite" disabled />
  </IconTileRow>

  <IconTileRow title="Mobile Frameworks">
    <IconTile src="/images/v3/icon-logo-react-native.png" label="React Native" href="/v3/react-native/setup/react-native" />

    <IconTile src="/images/v3/icon-logo-expo.png" label="Expo" href="/v3/react-native/setup/expo" />

    <IconTile src="/images/v3/icon-logo-flutter.png" label="Flutter" href="/v3/flutter/setup" />

    <IconTile src="/images/v3/icon-logo-swift.png" label="Swift" href="/v3/swift/setup" />

    <IconTile src="/images/v3/icon-logo-kotlin.png" label="Kotlin" disabled />
  </IconTileRow>

  <IconTileRow title="Server and API">
    <IconTile src="/images/v3/icon-logo-node.png" label="Node.js" href="/v3/server/setup" />

    <IconTile src="/images/v3/icon-logo-deno.png" label="Deno" href="/v3/server/setup" disabled />

    <IconTile src="/images/v3/icon-logo-bun.png" label="Bun" href="/v3/server/setup" disabled />
  </IconTileRow>

  <IconTileRow title="Other Platforms">
    <IconTile src="/images/v3/icon-logo-telegram.png" label="Telegram" href="/v3/general/telegram" />

    <IconTile src="/images/v3/icon-logo-chrome-extension.png" label="Chrome Extension" href="/v3/walkthroughs/chrome-extension-integration" />

    <IconTile src="/images/v3/icon-logo-electron.png" label="Electron" disabled />
  </IconTileRow>
</IconTileGrid>

## Chain Integration Guides

Para supports EVM, Solana, Cosmos, and Stellar chains and works with popular signing libraries and wallet connectors.

<CardGroup cols={4}>
  <ImageCard title="EVM" imgUrl="/images/v3/network-evm.png" href="/v3/react/guides/web3-operations/evm/setup-libraries" description="Ethers, Viem, Wagmi, and more" />

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

  <ImageCard title="Cosmos" imgUrl="/images/v3/network-cosmos.png" href="/v3/react/guides/web3-operations/cosmos/setup-libraries" description="CosmJS, CosmosKit, Graz" />

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

## Migrating from Another Provider

Already using an embedded wallet provider? These guides help you switch without rethinking the whole integration.

<CardGroup cols={3}>
  <ImageCard title="From Reown" imgUrl="/images/v3/migration-reown.png" href="/v3/react/guides/migration-from-reown" description="Migrate from Reown/AppKit" />

  <ImageCard title="From Web3Modal" imgUrl="/images/v3/migration-web3modal.png" href="/v3/react/guides/migration-from-walletconnect" description="Migrate from Web3Modal" />

  <ImageCard title="From Thirdweb" imgUrl="/images/v3/migration-thirdweb.png" href="/v3/react/guides/migration-from-thirdweb" description="Migrate from Thirdweb" />
</CardGroup>

## Additional Resources

<Tip>
  **Using an AI coding agent?** Paste this into Claude Code, Cursor, or any agent to get it set up with Para:

  ```
  Fetch https://docs.getpara.com/skill.md and help me build with Para
  ```

  Your agent will install the <Link href="/v3/cli/overview" label="Para CLI" />, authenticate, and help you build. <Link href="/v3/developer-tools/ai-tooling/agent-skill" label="Learn more" />
</Tip>

<CardGroup cols={3}>
  <ImageCard title="Developer Tools" imgUrl="/images/v3/general-examples.png" href="/v3/developer-tools/overview" description="CLI, AI integrations, and automation tools" />

  <ImageCard title="Troubleshooting" imgUrl="/images/v3/general-help.png" href="/v3/general/troubleshooting" description="Common issues and framework-specific fixes" />

  <ImageCard title="Go Live Checklist" imgUrl="/images/v3/general-checklist.png" href="/v3/general/checklist" description="Prepare your integration for production" />
</CardGroup>
