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

# Use Para Modal

> Follow this path when your React web app uses Para's prebuilt modal for authentication, embedded wallets, and signing.

Use this path when your React app can rely on Para's prebuilt modal for authentication, embedded wallet creation, wallet management, and signing prompts. Your app controls when the modal opens and how it fits into your product, while Para owns the wallet UI itself.

## Choose This Path If

* You are building a React, Next.js, Vite, or TanStack Start web app.
* You want Para auth, embedded wallets, wallet screens, and signing prompts out of the box.
* You want branding, supported auth methods, external wallets, and security posture managed from the Developer Portal.

<Info>
  Para Modal is React-only. If your app owns the screens, uses Vue, Svelte, the Web SDK directly, React Native, Flutter, or Swift, use [Build Custom UI](/v3/introduction/build-custom-ui). If your backend owns auth or wallet operations, use [Use Para from Your Backend](/v3/introduction/use-para-api).
</Info>

## Integration Lifecycle

<Steps>
  <Step title="Create a Para project">
    Create a project and API key in the [Developer Portal](https://developer.getpara.com/), then review [Developer Portal setup](/v3/general/developer-portal-setup).
  </Step>

  <Step title="Start with React & Web">
    Add Para to your app with the [React quickstart](/v3/react/quickstart), then choose the setup guide for [Next.js](/v3/react/setup/nextjs), [Vite](/v3/react/setup/vite), or [TanStack Start](/v3/react/setup/tanstack-start).
  </Step>

  <Step title="Configure the modal">
    Review [How Configuration Works](/v3/react/guides/customization/configuration), configure authentication in the [Developer Portal](/v3/react/guides/customization/developer-portal-authentication), then customize the [Para Modal](/v3/react/guides/customization/modal).
  </Step>

  <Step title="Sign with Para">
    Use [Sign with Para](/v3/react/guides/web3-operations/sign-with-para) to confirm that authentication, wallet creation, and signing work end to end.
  </Step>

  <Step title="Prepare for launch">
    Review the [Go Live Checklist](/v3/general/checklist) and [Production Deployment](/v3/general/production-deployment) before moving from `BETA` to `PRODUCTION`.
  </Step>
</Steps>

## Next Docs

<CardGroup cols={2}>
  <Card title="React SDK Quickstart" icon="react" href="/v3/react/quickstart">
    Add Para's web SDK, provider, and modal to a React app.
  </Card>

  <Card title="How Configuration Works" icon="sliders" href="/v3/react/guides/customization/configuration">
    Understand the v3 partner record, SDK overrides, and deprecated modal props.
  </Card>

  <Card title="Configure Authentication" icon="fingerprint" href="/v3/react/guides/customization/developer-portal-authentication">
    Choose the login methods, external wallets, and security posture your modal offers.
  </Card>

  <Card title="Style the Modal" icon="palette" href="/v3/react/guides/customization/modal-theming">
    Update colors, fonts, and CSS overrides for v3's simplified theme system.
  </Card>

  <Card title="Sign with Para" icon="signature" href="/v3/react/guides/web3-operations/sign-with-para">
    Verify the modal path by signing a message or transaction.
  </Card>
</CardGroup>