> ## 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 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 Card = ({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>;
};

export const Banner = ({title, description, primaryButton, secondaryButton, id = 'banner'}) => {
  const hasTwoButtons = primaryButton && secondaryButton;
  return <div className="p-6 rounded-xl text-white flex flex-col md:flex-row gap-4 bg-gradient-to-r from-orange-600 via-pink-600 to-purple-600">
      <div className="flex flex-1 flex-col">
        <h2 className="not-prose text-3xl text-white font-bold m-0">{title}</h2>
        <p className="not-prose text-white text-xs leading-4 mt-2 m-0">{description}</p>
      </div>
      <div className="flex flex-1 items-end gap-3 justify-start md:justify-end">
        {primaryButton && <a target={primaryButton.target || "_self"} href={primaryButton.linkHref} className={`not-prose flex ${hasTwoButtons ? 'flex-1' : 'flex-none w-1/2 md:w-auto'} justify-between bg-white text-orange-600 text-xs font-semibold p-4 rounded-xl items-end no-underline hover:bg-gray-50 transition-colors`}>
            <span className="mr-4 whitespace-pre-line leading-none">{primaryButton.linkText}</span>
            <div className="relative w-4 h-4 flex-shrink-0">
              <svg width="16" height="16" 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>
            </div>
          </a>}
        {secondaryButton && <a target={secondaryButton.target || "_self"} href={secondaryButton.linkHref} className="not-prose flex flex-1 justify-between bg-transparent text-white text-xs font-semibold p-4 rounded-xl items-end no-underline border border-white hover:bg-white/10 transition-colors">
            <span className="mr-4 whitespace-pre-line leading-none">{secondaryButton.linkText}</span>
            <div className="relative w-4 h-4 flex-shrink-0">
              <svg width="16" height="16" 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>
            </div>
          </a>}
      </div>
    </div>;
};

<Banner
  title="Kickstart Your Integration"
  primaryButton={{
linkText: "Try\nDemo",
linkHref: "https://demo.getpara.com/",
target: "_blank",
}}
  secondaryButton={{
linkText: "Developer\nPortal",
linkHref: "https://developer.getpara.com",
target: "_blank",
}}
/>

Para is an all-in-one developer suite to easily provision and manage embedded wallets directly within applications. Para is trusted by **100+ teams** and their **15M+ users**.

* **Familiar authentication:** Users sign up with email, phone, social login, or passkey. No seed phrases or browser extensions required, ever.
* **Non-custodial by design:** 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.
* **Multi-chain, every platform:** Support for EVM, Solana, Cosmos, and Stellar with SDKs for web, mobile, and server.

[Get Started](#get-started) · [Chain Integration Guides](#chain-integration-guides) · [Migrations](#migrating-from-another-provider) · [Resources](#additional-resources)

## Get Started

Pick your preferred framework below to set up Para.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

## Chain Integration Guides

Para supports any EVM, Solana, Cosmos, or Stellar chain and is compatible with popular signing libraries and wallet connectors.

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

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

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

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

## Migrating from Another Provider?

Already using an embedded wallet provider? We have step-by-step guides to help you switch.

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

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

  <Card title="From Thirdweb" imgUrl="/images/v2/migration-thirdweb.png" href="/v2/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 [Para CLI](/v2/cli/overview), authenticate, and help you build. [Learn more →](/v2/developer-tools/ai-tooling/agent-skill)
</Tip>

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

  <Card title="Troubleshooting" imgUrl="/images/v2/general-help.png" href="/v2/general/troubleshooting" description="Framework-specific guides for common issues" />

  <Card title="Examples Hub" imgUrl="/images/v2/general-examples.png" href="/v2/introduction/examples" description="Sample Apps to get started & help troubleshoot" />
</CardGroup>